修改placeholder的颜色，包括组件库中的

设计稿 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的样式问题啦。

完美解决，鼓掌鼓掌