如何修改输入框placeholder文字颜色|三体教程
文章目录

如何修改输入框placeholder文字颜色?

在网上看到说可以使用占位符属性来修改placeholder文字颜色,可是照着做并没有效果,代码如下。

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}
<input type="text" placeholder="Value">

后来又去查了一些相关资料,终于找到解决办法,就是使用伪元素或伪类。

  • 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

IE9及更低版本根本不支持该placeholder属性,而Opera 12及更低版本不支持占位符的任何CSS选择器。

请注意,伪元素在Shadow DOM中的作用与真实元素一样。一个paddingon input将不会获得与伪元素相同的背景色。

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

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

亲自测试一下

使用说明

  • 小心避免不好的对比。火狐的占位符似乎是一个减少不透明度,所以需要在opacity: 1这里使用。
  • 如果占位符文本不合适,请将占位符文本剪切掉,调整输入元素的大小,使用em最小的字体大小设置对其进行测试。不要忘记翻译:有些语言需要更多的空间,同一个字。
  • HTML支持浏览器,placeholder但没有CSS支持(如Opera)也应该被测试。
  • 一些浏览器对某些input类型(email,search)使用额外的默认CSS 。这些可能会以意想不到的方式影响渲染。使用属性-webkit-appearance-moz-appearance改变它。例:
[type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }



本文网址:http://www.santii.com/article/192.html


数据更新时间:2018-05-26