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

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

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

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

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


当前回答

这个怎么样

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

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

其他回答

除了toscho的回答,我还注意到Chrome 9-10和Safari 5在支持CSS财产方面的一些webkit不一致,值得注意。

具体来说,Chrome 9和10在设置占位符样式时不支持背景色、边框、文本装饰和文本转换。

这里是完整的跨浏览器比较。

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

我已经在我的移动平台上尝试了各种组合来改变颜色,最终是:

-webkit-text-fill-color: red;

这一招奏效了。

最简单的方法是:

#yourInput::placeholder {
    color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
    color: red;
}

此代码将使用::占位符选择器更改占位符的颜色。

::-webkit-input-placeholder { 
    /* Edge */
    color: red;
}

:-ms-input-placeholder { 
    /* Internet Explorer */
    color: red;
}

::placeholder {
    color: red;
}