修改 input/textarea 標簽屬性 placeholder 文本的顏色

 

一、改變 placeholder 文本顏色的方法如下：

/* Chrome */
::-webkit-input-placeholder{
  color: #1890ff;
}
/* IE 10+ */
:-ms-input-placeholder{
  color: #1890ff;
}
/* Firefox 4-18 */
/* Firefox 19+ */
:-moz-placeholder,
::-moz-placeholder{
  color: #1890ff;
  opacity: 1;
}

二、需要注意的有三點：

1. 如果項目中使用了UI框架（例如：ElementUI），那么設置可能會不起效，因為其框架底層已進行過設置，所以需要提升其優先級。

/* 推薦 */
.el-input ::-webkit-input-placeholder{
  color: #1890ff;
}
/* 添加關鍵詞 !important */
::-webkit-input-placeholder{
  color: #1890ff !important;
}

2. 將他們設置在一起時不會起效：

/* 一起設置 */
::-webkit-input-placeholder,
:-ms-input-placeholder{
  color: #1890ff;
}
/* 或者改變順序 */
:-ms-input-placeholder,
::-webkit-input-placeholder{
  color: #1890ff;
}

3. Firefox 瀏覽器表現稍微有些區別，顏色上要比 IE 和 Chrome 瀏覽器淺一些，所以需要配合 opacity 一起使用。

/* Firefox 4-18 */
/* Firefox 19+ */
:-moz-placeholder,
::-moz-placeholder{
  color: #1890ff;
  opacity: 1;
}

三、效果展示：