CSS3 修改 input 的 placeholder 属性默认的字体、颜色和大小
兼容性
placeholder 属性是 css3 中新增加的属性,IE9 和 Opera12 以下版本的 CSS 选择器均不支持占位文本。
修改 placeholder
默认的字体、颜色和大小
方式 1:因为每个浏览器的 CSS
选择器都有所差异,所以需要针对每个浏览器做单独的设定(可以在冒号前面写 input
和 textarea
)。
::-webkit-input-placeholder { /* WebKit browsers */
color: #999;
font-size: 16px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999;
font-size: 16px;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999;
font-size: 16px;
}
方式 2:(建议使用该方式)如果是在手机客户端 webview
只使用 webkit
内核方式即可。
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #666;
font-size: 16px;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #666;
font-size: 16px;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #666;
font-size: 16px;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: #666;
font-size: 16px;
}
[notice]个人直接用了方式 2,测试可用。其中的 textarea 可以根据需要选择是否去除,最好在 input 前加上一些详细层级,而不是应用到全局。[/notice]