设置input标签placeholder字体颜⾊有时会遇到这样的需求,输⼊框的默认提⽰⽂字与⽤户输⼊的⽂字不同。
<input className="city" placeholder="城市"/>
input {color:#ff7800}
如果只是设置input的颜⾊的话是达不到想要的效果的,css3有关于设置placeholder的属性-input-placeholder
Webkit内核的浏览器和Microsoft Edge使⽤的是伪元素::-webkit-input-placeholder
⽕狐19+使⽤的是伪元素::-moz-placeholder
⽕狐4-18使⽤伪类:-moz-placeholder
Microsoft 10和11使⽤伪类:-ms-input-placeholder
伪类和伪元素可以参考这篇⽂章
*::-webkit-input-placeholder {
color: red;
}
*:-moz-placeholder {
/* FF 4-18 */
color: red;
}
*::-moz-placeholder {
/* FF 19+ */
color: red;
}
*:-ms-input-placeholder {
/
* IE 10+ */
color: red;
}
*也可以换为input,以下demo的实现为
<input className="city" placeholder="城市"/>
input{color:#333;}
input::-webkit-input-placeholder {
color: ff7800;
}
input:-moz-placeholder {
/* FF 4-18 */
color: ff7800;
}
input::-moz-placeholder {
/* FF 19+ */
html设置字体颜属性
color: ff7800;
}
input:-ms-input-placeholder {
/* IE 10+ */
color: ff7800;
}