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

Change an HTML5 input's placeholder color with CSS

提问by David Murdoch

Chrome supports the placeholder attributeon input[type=text]elements (others probably do too).

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

But the following CSSdoesn't do anything to the placeholder's value:

但是以下CSS内容对占位符的值没有任何影响：

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

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

Valuewill still remain greyinstead of red.

Value仍将保留grey而不是red.

Is there a way to change the color of the placeholder text?

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

回答by fuxia

Implementation

执行

There are three different implementations: pseudo-elements, pseudo-classes, and nothing.

存在三种不同的实现：伪元素、伪类和空。

• WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element: ::-webkit-input-placeholder. ^[Ref]
• Mozilla Firefox 4 to 18 is using a pseudo-class: :-moz-placeholder(onecolon). ^[Ref]
• Mozilla Firefox 19+ is using a pseudo-element: ::-moz-placeholder, but the old selector will still work for a while. ^[Ref]
• Internet Explorer 10 and 11 are using a pseudo-class: :-ms-input-placeholder. ^[Ref]
• April 2017: Most modern browsers support the simple pseudo-element ::placeholder^[Ref]

• 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 and lower does not support the placeholderattribute at all, while Opera 12 and lower do not supportany CSS selector for placeholders.

Internet Explorer 9 及更低版本根本不支持该placeholder属性，而Opera 12 及更低版本不支持任何用于占位符的 CSS 选择器。

The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A paddingon an inputwill not get the same background color as the pseudo-element.

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

CSS selectors

CSS 选择器

User agents are required to ignore a rule with an unknown selector. See Selectors Level 3:

用户代理需要忽略带有未知选择器的规则。请参阅选择器级别 3：

a groupof selectors containing an invalid selector is invalid.

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

So we need separate rules for each browser. Otherwise the whole group would be ignored by all browsers.

所以我们需要为每个浏览器制定单独的规则。否则整个组将被所有浏览器忽略。

::-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!">

Usage notes

使用说明

• Be careful to avoid bad contrasts. Firefox's placeholder appears to be defaulting with a reduced opacity, so needs to use opacity: 1here.
• Note that placeholder text is just cut off if it doesn't fit – size your input elements in emand test them with big minimum font size settings. Don't forget translations: some languages need more roomfor the same word.
• Browsers with HTML support for placeholderbut without CSS support for that (like Opera) should be tested too.
• Some browsers use additional default CSS for some inputtypes (email, search). These might affect the rendering in unexpected ways. Use the properties-webkit-appearanceand -moz-appearanceto change that. Example:

• 小心避免不良对比。Firefox 的占位符似乎默认降低了不透明度，因此需要在opacity: 1此处使用。
• 请注意，如果占位符文本不合适，它就会被截断——调整输入元素的大小em并使用大的最小字体大小设置来测试它们。不要忘记翻译：某些语言需要更多空间来容纳同一个词。
• 支持 HTMLplaceholder但不支持 CSS 的浏览器（如 Opera）也应该进行测试。
• 某些浏览器对某些input类型 ( email, search)使用额外的默认 CSS 。这些可能会以意想不到的方式影响渲染。使用属性-webkit-appearance并-moz-appearance更改它。例子：

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

回答by brillout

/* 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>

This will style all inputand textareaplaceholders.

这将设置所有input和textarea占位符的样式。

Important Note:Do not group these rules. Instead, make a separate rule for every selector (one invalid selector in a group makes the whole group invalid).

重要说明：不要将这些规则分组。相反，为每个选择器制定单独的规则（一组中的一个无效选择器会使整个组无效）。

回答by Matt

You may also want to style textareas:

您可能还想为 textarea 设置样式：

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

回答by EIIPII

For Bootstrapand Lessusers, there is a mixin .placeholder:

对于Bootstrap和Less用户，有一个 mixin .placeholder：

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

回答by ajcw

In addition to toscho's answer I've noticed some webkit inconsistencies between Chrome 9-10 and Safari 5 with the CSS properties supported that are worth noting.

除了 toscho 的回答之外，我还注意到 Chrome 9-10 和 Safari 5 之间的一些 webkit 不一致，它们支持的 CSS 属性值得注意。

Specifically Chrome 9 and 10 do not support background-color, border, text-decorationand text-transformwhen styling the placeholder.

具体地说铬9和10不支持background-color，border，text-decoration并text-transform定型占位符时。

The full cross-browser comparison is here.

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

回答by Konst_

For Sassusers:

对于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);
}

回答by Love Trivedi

This will work fine. DEMO HERE:

这将正常工作。演示在这里：

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" />

回答by Dionysios Arvanitis

In Firefox and Internet Explorer, the normal input text color overrides the color property of placeholders. So, we need to

在 Firefox 和 Internet Explorer 中，正常的输入文本颜色会覆盖占位符的颜色属性。所以，我们需要

::-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; 
}

回答by Kristian

Cross-browser solution:

跨浏览器解决方案：

/* 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; }

Credit: David Walsh

信用：大卫沃尔什

回答by Mike Jerred

Use the new ::placeholderif you use autoprefixer.

::placeholder如果您使用autoprefixer ，请使用新的。

Note that the .placeholder mixin from Bootstrapis deprecated in favor of this.

请注意，Bootstrap中的 .placeholder mixin已被弃用，以支持这一点。

Example:

例子：

input::placeholder { color: black; }

When using autoprefixer the above will be converted to the correct code for all browsers.

使用 autoprefixer 时，上述内容将被转换为适用于所有浏览器的正确代码。