使用CSS更改HTML5输入的占位符颜色

Question

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

但是以下CSS内容对占位符的价值没有任何作用：

input[placeholder], [placeholder], *[placeholder] {

    color: red !important;

}


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

Value仍将保留grey而不是red。

是否可以更改占位符文本的颜色？

Answer 1

实作

有三种不同的实现：伪元素，伪类，什么也没有。

• WebKit，Blink（Safari，Google Chrome，Opera 15+）和Microsoft Edge使用伪元素：::-webkit-input-placeholder。
• Mozilla Firefox的4至18是使用伪类：:-moz-placeholder（ 一个 冒号）。
• Mozilla Firefox 19+使用的是伪元素：::-moz-placeholder，但是旧的选择器仍然可以使用一段时间。
• Internet Explorer 10和11使用伪类：:-ms-input-placeholder。
• 2017年4月： 大多数现代浏览器都支持简单的伪元素::placeholder [ Ref ]

Internet Explorer 9和更低版本完全不支持该placeholder属性，而Opera12和更低版本则不支持占位符的任何CSS选择器。

关于最佳实现的讨论仍在进行中。请注意，伪元素在ShadowDOM中的作用类似于真实元素。一个padding上input不会得到相同的背景颜色与伪元素。

CSS选择器

用户代理必须忽略具有未知选择器的规则。

包含无效选择器的一组选择器无效。

因此，我们需要为每个浏览器使用单独的规则。否则，整个组将被所有浏览器忽略。

::-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并使用较大的最小字体设置对其进行测试。不要忘记翻译：某些语言需要为同一个单词留出更多空间。
• 具有HTML支持placeholder但不具有CSS支持的浏览器（例如Opera）也应进行测试。
• 有些浏览器使用一些额外的默认CSS input类型（email，search）。这些可能会以意想不到的方式影响渲染。使用属性 -webkit-appearance并-moz-appearance进行更改。例：

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