.invalid:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: red;
}
.invalid::-moz-placeholder { /* Mozilla Firefox 19+ */
color: red;
}
input.invalid:-ms-input-placeholder{
color: red;
}
input.invalid::-webkit-input-placeholder {
color: red;
}
用这些伪类就可以让placeholder变色了,你只需要在用户输错的时候,用js给input加上invalid class就行了
<input class="invalid" type="text" id="name" name="name" placeholder="请输入姓名">
这些属性,我都实测过,是生效的,但是在firefox中需要添加opacity:1,因为firefox默认的有一个透明图,要把它的这个属性给重写掉,最后就是
.invalid:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: red;
opacity: 1;
}
.invalid::-moz-placeholder { /* Mozilla Firefox 19+ */
color: red;
opacity: 1;
}
input.invalid:-ms-input-placeholder{
color: red;
}
input.invalid::-webkit-input-placeholder {
color: red;
}