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

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

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

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

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


当前回答

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

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

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

其他回答

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

-webkit-text-fill-color: red;

这一招奏效了。

添加一个非常简单的可能性:CSS过滤器!

它将设置所有内容的样式,包括占位符。

下面将在同一调色板上设置两个输入元素,使用色调过滤器进行颜色更改。它现在在浏览器中呈现得很好(除了…)

输入{滤镜:棕褐色(100%)饱和(400%)灰度(0)对比度(200%)色调旋转(68deg)反转(18%);}<input placeholder=“Hello world!”/><input-type=“date”/><br><输入类型=“范围”/><input-type=“color”/>

要允许用户使用输入类型颜色进行动态更改,或查找细微差别,请查看以下片段:

发件人:Codepen

函数stylElem(){stylo.dataset.hue=((parseInt(stylo.value.substring(1),16))/46666).toFixed(0)Array.from(document.querySelectorAll('输入,音频,视频')).forEach(函数(e){e.style.cssText+=“;滤镜:棕褐色(100%)饱和(400%)灰度(0)对比度(200%)色调旋转(”+styl.dataset.hue+“deg)反转(”+(styl.ddataset.hue/3.6)+“%)”out.innerText=e.style.css文本})()}stylElem()正文{背景:黑色;颜色:白色}选择颜色!<input type=“color”id=“stylo”oninput=“stylElem()”><br><div id=“out”></div><p><input placeholder=“Hello world!”/><input-type=“date”/><br><输入类型=“范围”/><br><音频控件src=“#”></audio><br><br><视频控件src=“#”></video>

Css过滤器文档:https://developer.mozilla.org/en-US/docs/Web/CSS/filter

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

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;
    }

    :-moz-placeholder { 
    /* Firefox 18- */
      color: pink;
    }

试试这个吧

input::placeholder 
  color:#900009;
}