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

问题描述

Chrome支持 input [type = text] 元素（其他人可能也会这样做）placeholder属性>占位符属性。

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

  input [placeholder]，[placeholder]，* [placeholder] {color：red！important;}  < input type =textplaceholder =Value>   $ b 
 价值仍然会保持灰色而不是红色。
 
 
 
 有没有办法改变占位符文本的颜色？ 
 
 
 
解决方案实现有三种不同的实现：伪  
 $ b 
 
 
 WebKit，Blink（Safari，Google Chrome，Opera 15+）和Microsoft Edge正在使用一个伪元素： ::  -  webkit-input-placeholder 。  [ Ref ]  
 
 
 Mozilla Firefox 4至18使用伪类：： -  moz-placeholder （ one 冒号）。  [参考]  
 
 
 Mozilla Firefox 19+使用伪元素： ::  -  moz-placeholder ，但旧选择器仍然可以工作一段时间。  [参考]  
 
 Internet Explorer 10和11正在使用伪类：： -  ms-input-placeholder 。  [ Ref ] 2017年4月：大多数现代浏览器都支持简单的伪元素 :: placeholder   [ 参考]   
 
 
 
 
 
 Internet Explorer 9及更低版本根本不支持占位符属性，而歌剧12更低的不支持任何CSS选择器占位符。
 
 
 
关于最佳实现的讨论仍在继续。请注意，伪元素在 Shadow中的作用与真实元素一样DOM 的。 输入上的 padding 不会获得与伪元素相同的背景色。
 
 
 
 CSS选择器
 
 
 
用户代理需要忽略具有未知选择器的规则。请参阅选择器级别3 ： 
 
 < blockquote> 
 
包含无效选择器的选择器的组无效。
 
 
因此，我们需要为每个浏览器分别制定规则。否则，整个组将被所有浏览器忽略。 
 
 
  :: webkit-input-placeholder {/ * WebKit，Blink，Edge * / color：＃909;}： 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;} ::  -  ms-input-placeholder {/ * Microsoft Edge * / color：＃909;}： ：placeholder {/ *大多数现代浏览器现在都支持这一点。 * / color：＃909;}  

< input placeholder =Stack Snippets are awesome！>

/ h2>

• 请注意避免不良对比。 Firefox的占位符似乎默认为不透明度降低，因此需要在这里使用 opacity：1 。
注意占位符文本仅仅是如果它不适合切断 - 在 em 中设置输入元素的大小，然后用最小的字体大小设置测试它们。不要忘记翻译：一些语言需要更多空间同一个词。

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


• 某些浏览器对某些输入类型（ email ，搜索）。这些可能会以意想不到的方式影响渲染。使用属性 -webkit-外观和 -moz-appearance 来改变它。例如：
  
  
  

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

  
  

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

  But the following CSS doesn't do anything 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?

  解决方案

  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]
  • April 2017: Most modern browsers support the simple pseudo-element ::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;
  }
  ::-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: 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屋！