placeholder
颜色调整:
/* WebKit browsers 适配谷歌 */
input::-webkit-input-placeholder {
color: #BDCADA;
}
/* Mozilla Firefox 4 to 18 适配火狐 */
input:-moz-placeholder {
color: #BDCADA;
}
/* Mozilla Firefox 19+ 适配火狐 */
input::-moz-placeholder {
color: #BDCADA;
}
/* Internet Explorer 10+ 适配ie*/
input:-ms-input-placeholder {
color: #BDCADA;
}
placeholder
文字颜色、字号、位置调整:
每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定(可以在冒号前面写input
和textarea
)。
input::-webkit-input-placeholder { /* WebKit browsers */
color:#999;font-size:16px;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:#999;font-size:16px;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
color:#999;font-size:16px;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
color:#999;font-size:16px;
}
input::-ms-input-placeholder{text-align: center;}
input::-webkit-input-placeholder{text-align: center;}
可以将居中属性替换为定位属性:
input::-webkit-input-placeholder{position:relative;left:20px;}
给input
框中的placeholder
设置样式可以用::-webkit-input-placeholder{}
属性,可以在里面设置text-indent
来通过首行缩进改变文字位置,也可以使用text-align
或者padding
值来设置。
拜