使用CSS更改HTML5输入的占位符颜色 [英] Change a HTML5 input's placeholder color with CSS

问题描述

Chrome支持 input [type = text] 元素（其他人也可以）。

但是下面的 CSS 不会蹲到占位符的值：

div class =snippetdata-lang =jsdata-hide =falsedata-console =truedata-babel =false>

  input [placeholder]，[placeholder]，* [placeholder] {color：red！important;}  

 < input type =textplaceholder =Value>  

价值 $ c> gray 而不是红色。

要更改占位符文本的颜色？

我已经为不支持占位符属性的浏览器使用jQuery占位符插件。

解决方案

实现

有三种不同的实现： ，伪类和无。

• WebKit，Blink（Safari，Google Chrome，Opera 15+） -element： :: - webkit-input-placeholder 。 ^[参考]


• Mozilla Firefox 4到18使用了伪类：： - moz-placeholder （一个冒号）。 ^[参考]


• Mozilla Firefox 19+正在使用伪元素： :: moz-placeholder ，但旧的选择器仍会工作一段时间。 ^{[参考 ]}


• Internet Explorer 10和11正在使用伪类：： - ms-input-placeholder 。 ^{[参考 ]}

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

最佳实现仍在继续。请注意，伪元素的作用类似于中的真实元素阴影DOM 。在输入上的 padding 将不会获得与伪元素相同的背景颜色。

CSS选择器

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

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

因此，我们需要为每个浏览器单独制定规则。否则，所有浏览器都会忽略整个组。

＃909;} - - - - - - - - - - - - - - - - - - - - - - - - - webkit-input-placeholder {/ * WebKit，Blink， moz-placeholder {/ * Mozilla Firefox 4到18 * / color：＃909; opacity：1;} :: moz-placeholder {/ * Mozilla Firefox 19+ * / color：＃909; opacity：1;}： - ms-input-placeholder {/ * Internet Explorer 10-11 * / color：＃909;}

 < input placeholder =Stack Snippets are awesome！>  

div>

使用注意事项

• 小心避免不良对比。 Firefox的预留位置似乎是以不透明度降低的预设值，因此需要在此使用 opacity：1 。


• 请注意，预留位置文字如果它不适合切断 - 在 em 中调整输入元素大小，并使用大的最小字体大小设置测试它们。不要忘记翻译：某些语言需要更多空间同一个词。


• 占位符的HTML支持浏览器，但没有CSS支持（如Opera）。


• 某些浏览器对某些输入类型使用额外的默认CSS（电子邮件， search ）。这些可能以意想不到的方式影响呈现。使用属性 -webkit -appearance 和 -moz-appearance 来更改。示例：

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

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

But the following CSS doesn't do diddly squat to the placeholder's value:

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

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

Value will still remain grey instead of red.

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

I'm already using the jQuery placeholder plugin for the browsers that don't support the placeholder attribute natively.

解决方案

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 (one colon). ^[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]

Internet Explorer 9 and lower does not support the placeholder attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.

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

CSS selectors

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

a group of 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;
}

<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: 1 here.
• Note that placeholder text is just cut off if it doesn’t fit – size your input elements in em and test them with big minimum font size settings. Don’t forget translations: some languages need more room for the same word.
• Browsers with HTML support for placeholder but without CSS support for that (like Opera) should be tested too.
• Some browsers use additional default CSS for some input types (email, search). These might affect the rendering in unexpected ways. Use the properties -webkit-appearance and -moz-appearance to change that. Example:

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

这篇关于使用CSS更改HTML5输入的占位符颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！