有没有一种让我们修改placeholder的样式的方式？答案肯定是有的，我们可以通过::placeholder来修改placeholder的样式。
先来让我们认识一下::placeholder，它是一个伪元素，它的作用是用来选择placeholder的，我们可以通过它来修改placeholder的样式，如下所示：
input::placeholder {
color: red;
}
这样我们就可以修改placeholder的颜色了。
1. 伪元素::placeholder
::placeholder是一个伪元素，参考MDN的介绍，它的作用是用来选择placeholder的，我们可以通过它来修改placeholder的样式，如下所示：
伪元素有一个特点，就是并不是所有的dom元素都支持，部分伪元素只有指定的dom元素才支持，比如::placeholder只有input和textarea才支持，其他的dom元素是不支持的。
2. ::placeholder的兼容性
::placeholder的兼容性如下所示：
- Chrome 56+
- Firefox 51+
- Safari 10.1+
- Opera 43+
- Edge 16+
- IE 11+
- iOS Safari 10.3+
- Android Browser 4.4+
- Android Chrome 56+
更多的兼容性可以参考caniuse。
对于IE和Android Browser来说，它们都不支持::placeholder，但是我们可以通过私有前缀来实现，如下所示：
input:-ms-input-placeholder {
color: red;
}
input::-webkit-input-placeholder {
color: red;
}
input::-moz-placeholder {
color: red;
}
这样我们就可以实现IE和Android Browser的兼容了。
注意私有前缀的顺序，::-webkit-input-placeholder要放在::-moz-placeholder前面，否则Firefox会失效。
3. ::placeholder的使用示例
现在有一个需求，就是当input的状态为disabled的时候，我们不需要显示placeholder，这个时候我们可以通过::placeholder来实现，如下所示：
<input type="text" placeholder="请输入内容" disabled />
input::placeholder {
color: red;
}
input:disabled::placeholder {
color: transparent;
}
这样我们就可以实现当input的状态为disabled的时候，不显示placeholder了。
这里又多了一个伪类disabled的小知识点，它的作用是用来选择disabled状态的input的，我们可以通过它来修改disabled状态的input的样式，如下所示：
input:disabled {
color: red;
}
6. 结语
本文主要介绍了::placeholder的使用，它是一个伪元素，它的作用是用来选择input和textarea的placeholder的，具体的使用场景还是根据实际的需求来定。
