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

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

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

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

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


当前回答

这会很好的。此处演示:

input::-webkit输入占位符,textarea::-webkit输入占位符{颜色:#666;}输入:-moz占位符,文本区域:-moz占位符{颜色:#666;}input::-moz占位符,文本区域::-moz占位符{颜色:#666;}input:-ms输入占位符,文本区域:-ms输入占位符{颜色:#666;}<input type=“text”placeholder=“Value”/>

其他回答

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

现在,我们有了一种标准的方法来将CSS应用于这个CSS模块Level 4草稿中输入的占位符::占位符伪元素。

跨浏览器解决方案:

/* all elements */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual elements: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual elements: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

资料来源:David Walsh

试试这个吧

input::placeholder 
  color:#900009;
}

这个怎么样

<input type=“text”value=“placeholder text”onfocus=“this.style.color='#000';this.value=“”;“style=”颜色:#f00;" />

没有CSS或占位符,但您可以获得相同的功能。