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

Chrome 支持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[ 参考 ]
  • Mozilla Firefox 4 至 18 使用的是伪类:: :-moz-placeholder一个冒号)。 [ 参考 ]
  • Mozilla Firefox 19 + 使用的是伪元素::-moz-placeholder ,但是旧的选择器仍然可以使用一段时间。 [ 参考 ]
  • Internet Explorer 10 和 11 使用的是伪类:: :-ms-input-placeholder[ 参考 ]
  • 2017 年 4 月: 大多数现代浏览器都支持简单的伪元素::placeholder [ 参考 ]

Internet Explorer 9 和更低版本完全不支持placeholder属性,而Opera 12 和更低版本不支持任何 CSS 选择器。

关于最佳实现的讨论仍在进行中。请注意,伪元素的行为类似于Shadow DOM中的真实元素。 input上的padding将不会获得与伪元素相同的背景色。

CSS 选择器

用户代理必须忽略带有未知选择器的规则。参见选择器级别 3

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

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

::-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输入元素的大小,并使用较大的最小字体设置对其进行测试。不要忘记翻译:某些语言需要为同一个单词留出更多空间
  • 对于具有placeholder HTML 支持但不具有 CSS 支持的浏览器(例如 Opera),也应该进行测试。
  • 某些浏览器对某些input类型( emailsearch )使用其他默认 CSS。这些可能会以意想不到的方式影响渲染。使用属性 -webkit-appearance-moz-appearance进行更改。例:
[type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

/* do not group these rules */
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
    opacity: 1;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
    opacity: 1;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}
*::-ms-input-placeholder {
    /* Microsoft Edge */
    color: red;
}
*::placeholder {
    /* modern browser */
    color: red;
}
<input placeholder="hello"/> <br />
<textarea placeholder="hello"></textarea>

这将设置所有inputtextarea占位符的样式。

重要说明:请勿对这些规则进行分组。而是为每个选择器制定一个单独的规则(组中一个无效的选择器会使整个组无效)。

您可能还想设置 textareas 的样式:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #636363;
}

对于BootstrapLess用户,有一个 mixin .placeholder:

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}

除了 toscho 的答案外,我还注意到 Chrome 9-10 和 Safari 5 之间在支持 CSS 属性方面存在一些 webkit 不一致之处,值得注意。

特别是 Chrome 9 和 10 在设置占位符样式时不支持background-colorbordertext-decorationtext-transform

完整的跨浏览器比较在这里

对于Sass用户:

// Create placeholder mixin
@mixin placeholder($color, $size:"") {
  &::-webkit-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &::-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-ms-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
}

// Use placeholder mixin (the size parameter is optional)
[placeholder] {
  @include placeholder(red, 10px);
}

这样就可以了。 此处演示:

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #666;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #666;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #666;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #666;
}
<input type="text" placeholder="Value" />

在 Firefox 和 Internet Explorer 中,正常的输入文本颜色将覆盖占位符的 color 属性。因此,我们需要

::-webkit-input-placeholder { 
    color: red; text-overflow: ellipsis; 
}
:-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}
::-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
} /* For the future */
:-ms-input-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}

跨浏览器解决方案:

/* all elements */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual elements: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual elements: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

信用: 大卫 · 沃尔什(David Walsh)

如果使用autoprefixer,则使用新的::placeholder

请注意,不赞成使用Bootstrap中的. placeholder mixin。

例:

input::placeholder { color: black; }

使用 autoprefixer 时,以上内容将转换为所有浏览器的正确代码。