一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。
系列介绍
经常会被面试官问到这个怎么实现，或者怎么实现xx？
有些功能或者效果没有做过或者实现过，回答不出来，场面一度有些尴尬
于是打算出一个怎么实现系列，来实现xx功能或者xx效果，以此来提升自己的实战效果和能力。
本系列是一个开放系列，我实现的不一定是最好的，欢迎大家交流讨论
场景
面试官：input经常使用吧，那里面placeholder的文字颜色怎么修改呢？
（思考了一会）
我：input的文字颜色修改过，但是placeholder的文字颜色没有修改过
面试官：...
尝试解决
先创建一个html文件，在body里面创建一个input标签
<body>
<input type="text" placeholder="请输入文字" />
</body>
在head里面创建style标签，给input添加一个文字样式
<style>
input {
color: blue;
}
</style>
到浏览器里面查看，没有输入文字时，显示灰色的placeholder文字
输入文字后，文字颜色改变了
给input设置文字颜色，只能修改输入文本的颜色，无法修改placeholder的文字颜色
输入文字和没有输入文字的html结构是一样的
也就意味着无法选到placeholder的文字节点来修改它的文字颜色。
自己无法解决，就先查阅一下资料看下
查阅资料
在mdn上查阅了一下资料，发现了相关资料
伪元素::placeholder可以选择一个表单元素的占位文本，它允许开发者和设计师自定义占位文本的样式
那我们就可以使用::placeholder这个伪元素，来控制placeholder的文字颜色了
给input添加一个伪元素样式
input::placeholder {
color: red;
}
到浏览器查看效果
文字颜色确实修改了
小结
如果想修改input的placeholder的文字颜色，可以使用::placeholder这个伪元素来实现
