如何动态修改 placeholder 的颜色？

时隔今日，是什么让我又想起了我亲爱的博客？~~是爱么？是良心发现么？No~~~~还不是因为我是一个有责任感的人，吼吼 ~~ 敲黑板，321~：爱就像蓝天白云，晴空万里，突然暴风雨 ~~哈哈哈哈，偶尔小皮一下，言归正传：

• 最近做项目的时候，遇到了这样一个问题：

<input type="text" id="name" name="name" placeholder="请输入姓名">

• 当用户输入错误的时候，placeholder内容颜色更改为红色，css代码如下：

.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就行了，是不是超级简单咩 ~~