Chrome 支持 placeholder attribute在 input[type=text] 元素上(其他人可能也这样做)。

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

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}

<input type="text" placeholder="Value">

但 Value 仍将保持为 grey 而不是 red。

有没有办法改变占位符文本的颜色？

最佳答案

实现

共有三种不同的实现方式:伪元素、伪类和无。

• WebKit、Blink(Safari、Google Chrome、Opera 15+)和 Microsoft Edge 使用伪元素:::-webkit-input-placeholder。 ^{[ Ref ]}
• Mozilla Firefox 4 到 18 使用伪类::-moz-placeholder(one 冒号)。 ^{[ Ref ]}
• Mozilla Firefox 19+ 正在使用伪元素:::-moz-placeholder，但旧的选择器仍然可以工作一段时间。 ^{[ Ref ]}
• Internet Explorer 10 和 11 使用伪类::-ms-input-placeholder。 ^{[ Ref ]}
• 2017 年 4 月:大多数现代浏览器都支持简单的伪元素 ::placeholder ^{[ Ref ]}

Internet Explorer 9 及更低版本根本不支持 placeholder 属性，而 Opera 12 and lower do not support占位符的任何 CSS 选择器。

关于最佳实现的讨论仍在继续。注意 Shadow DOM 中的伪元素就像真实元素一样。 . input 上的 padding 不会获得与伪元素相同的背景颜色。

CSS 选择器

用户代理需要忽略具有未知选择器的规则。见 Selectors Level 3 :

a group of selectors containing an invalid selector is invalid.

所以我们需要为每个浏览器设置单独的规则。否则，所有浏览器都会忽略整个组。

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #909;
}

<input placeholder="Stack Snippets are awesome!">

使用说明

• 请注意避免产生不良对比。 Firefox 的占位符似乎默认降低了不透明度，因此需要在此处使用 opacity: 1。
• 请注意，如果不合适，占位符文本将被截断 - 在 em 中调整输入元素的大小并使用最小字体大小设置对其进行测试。不要忘记翻译:一些语言 need more room同一个词。
• HTML 支持 placeholder 但不支持 CSS 的浏览器(如 Opera)也应进行测试。
• 占位符不能替代标签，因此请确保您也有标签
• 某些浏览器对某些 input 类型(email、search)使用额外的默认 CSS。这些可能会以意想不到的方式影响渲染。使用 properties -webkit-appearance 和 -moz-appearance 来改变它。示例:

    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

https://stackoverflow.com/questions/2610497/