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

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

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

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

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


当前回答

在html文件中:

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

在css文件中:

.redPlaceHolder{
   color: #ff0000;
}

其他回答

CSS提供::占位符伪元素。

请注意,Bootstrap中的.placeholder mixin已被弃用。

例子:

input::placeholder { color: black; }

当使用autorefixer时,以上代码将被转换为适用于所有浏览器的正确代码。

输入::占位符{color:red;}<input-type=“text”placeholder=“value”>

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

添加一个非常简单的可能性: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-type=“text”placeholder=“Value”>