设计稿 vs 实际页面
于是在项目中设置placeholder的颜色
```
textarea::-webkit-input-placeholder {
color: #D2D2D3;
}
```
颜色依然较深，没看见啥效果，不是UI期望的。
直接加一个原生的input,发现是有效的，所以上面的修改颜色代码有效，那么就应该是组件库改写了该样式。
那么下一步就是找出vant 组件库中的选择器，对其进行覆盖操作。
那么问题来了，dom中根本就找不到placeholder。所以没法选中查看其具体选择器和样式了；
下面教你找到placeholder
1、打开控制台，点击三个点展开
2、点击下面的设置（settings）
3、勾上 Show user agent shadow DOM
这时候，在选中你input，看到了选择器是.van-field__control::-webkit-input-placeholder。
于是加上如下代码覆盖组件库的样式：
```
input.van-field__control {
&::-webkit-input-placeholder {
color: #D2D2D3;
}
&::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #D2D2D3;
}
&:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #D2D2D3;
}
&:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #D2D2D3;
}
}
```
注：根据UI，看怎么加选择器覆盖比较合适，如果是整个项目就全局加上，如果只是个别的地方，就需要包裹到对应的选择器下，或者在当前页的scoped样式下，在穿透到组件库中（ scss 用 /deep/ , styl 用 >>> ）。
最终效果如下：
以后再也不用球球UI放过placeholder的样式问题啦。
完美解决，鼓掌鼓掌👏👏👏
网友评论