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

Chrome支持元素上的占位符属性input[type=text](其他人可能也会这样做)。

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

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 Ref ]

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

有关最佳实施的讨论仍在继续。请注意,伪元素在Shadow DOM中的作用与真实元素相同。A paddinginput不会得到与伪元素相同的背景颜色。

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


使用说明

  • 小心避免不好的对比。火狐的占位符似乎是一个不透明度降低的默认值,所以需要在opacity: 1这里使用。
  • 请注意,如果占位符文本不合适,请将占位符文本切断 – 调整输入元素的大小em并用最小字体大小设置对其进行测试。不要忘记翻译:有些语言需要更多的空间来容纳同一个词。
  • HTML支持placeholder但没有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;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}
<input    placeholder='hello'/> <br />
<textarea placeholder='hello'></textarea>


这将样式所有inputtextarea占位符。

重要说明:不要将这些规则分组。相反,为每个选择器制定一个单独的规则(一个组中的一个无效选择器使整个组无效)。

添加评论

友情链接:蝴蝶教程