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

实作

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

• 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

关于最佳实现的讨论仍在进行中。请注意，伪元素在ShadowDOM中的作用类似于真实元素。一个

padding

input

CSS选择器

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

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

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

::-webkit-input-placeholder {     color:    #909;}:-moz-placeholder {    color:    #909;   opacity:  1;}::-moz-placeholder {    color:    #909;   opacity:  1;}:-ms-input-placeholder {    color:    #909;}::-ms-input-placeholder {    color:    #909;}::placeholder {    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;}