Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。

但以下CSS对占位符的值没有任何作用:

输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>

但Value仍将保持灰色而不是红色。

是否有方法更改占位符文本的颜色?


当前回答

对于Bootstrap用户,如果您使用class=“form control”,则可能存在CSS特定性问题。您应该获得更高的优先级:

.form-control::-webkit-input-placeholder {
    color: red;
}
//.. and other browsers

或者如果您使用的是Less:

.form-control{
    .placeholder(red);
}

其他回答

您还可以设置文本区域的样式:

input::-webkit输入占位符,textarea::-webkit输入占位符{颜色:#FF9900;}输入:-moz占位符,文本区域:-moz占位符{颜色:#FF9900;}<textarea rows=“4”cols=“50”placeholder=“堆栈代码段很好!”></text区域>

试试这个

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

尝试此css

input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #ddd;
}
input::-moz-placeholder { /* Firefox 19+ */
  color: #ddd;
}
input:-ms-input-placeholder { /* IE 10+ */
  color: #ddd;
}
input:-moz-placeholder { /* Firefox 18- */
  color: #ddd;
}

::占位符{颜色:红色;}<input-type=“text”placeholder=“Value”>

在html文件中:

<input type="text" placeholder="placeholder" class="redPlaceHolder">

在css文件中:

.redPlaceHolder{
   color: #ff0000;
}