在一个业务场景中我想让input输入框占位字符显示的字体颜色和输入的颜色保持一致,想当然地认为应该要设置input的颜色,改了好几次都不管用,最后想到了placeholder属性,搜索一下之后发现果然可以针对placeholder来设置你自己想要的颜色

示例如下:

1
2
3
4
.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;}

还可以修改字体大小

1
2
3
4
.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加大权重