1 分钟阅读
如何修改input输入框占位placeholder的字体
在一个业务场景中我想让input输入框占位字符显示的字体颜色和输入的颜色保持一致,想当然地认为应该要设置input的颜色,改了好几次都不管用,最后想到了placeholder属性,搜索一下之后发现果然可以针对placeholder来设置你自己想要的颜色。 示例如下:
<input class="inputtext1" type="text" placeholder="input text1" />
.inputtext1:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */color:#f90 !important;}
.inputtext1::-moz-placeholder{ /* Mozilla Firefox 19+ */color:#f90 !important;}
.inputtext1:-ms-input-placeholder{color:#f90 !important;}
.inputtext1::-webkit-input-placeholder{color:#f90 !important;}
还可以修改字体大小
<input class="inputtext2" type="text" placeholder="input text2" />
.inputtext2::-webkit-input-placeholder{ /* WebKit browsers*/color:#999 !important;font-size:18px; }
.inputtext2:-moz-placeholder{ /* Mozilla Firefox 4 to 18*/color:#999 !important;font-size:18px; }
.inputtext2::-moz-placeholder{ /* Mozilla Firefox 19+*/color:#999 !important;font-size:18px; }
.inputtext2:-ms-input-placeholder{ /* Internet Explorer 10+*/color:#999 !important;font-size:18px;}
注意要加!important加大权重
评论