怎么控制表单placeholder属性的样式兼容各大浏览器?

当我们使用placeholder的时候会遇到样式的控制和版本的兼容问题(但是还是只有css3支持),以至于达不到我们想要的效果,下面来看一种:

下面是css:

.invalid:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: red;
font-family: "Microsoft YaHei";
font-size: 12px;
} .invalid::-moz-placeholder { /* Mozilla Firefox 19+ */
color: red;
font-family: "Microsoft YaHei";
font-size: 12px;
} input.invalid:-ms-input-placeholder{
color: red;
font-family: "Microsoft YaHei";
font-size: 12px;
} input.invalid::-webkit-input-placeholder {
color: red;
font-family: "Microsoft YaHei";
font-size: 12px;
}

但我们需要控制placeholder的时候,可以添加这个类invalid就可以了

下面是Html:

<input type="text" class="invalid" placeholder="请输入文字">
上一篇:iOS原生与H5交互


下一篇:OpenACC 计算规约时发现的小坑