怎么控制表单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="请输入文字">