§ ITPOW >> 文档 >> CSS

CSS 指定 placeholder 样式

作者:vkvi 来源:ITPOW(原创) 日期:2021-8-18
input::placeholder { color:#f00; font-size:12px; }

使用 ::placeholder 即可为 input、textarea 指定 placeholder 的样式,如上是限定了只应用于 input。以上代码在 Chrome、Firefox 中均有效。

网上还有种写法,分别是针对 IE、Firefox、WebKit 写的,其实我个人觉得没必要,如下:

input:-ms-input-placeholder { color:#f00; font-size:12px; }
input:-moz-placeholder { color:#f00; font-size:12px; }
input::-moz-placeholder { color:#f00; font-size:12px; }
input::-webkit-input-placeholder { color:#f00; font-size:12px; }
input::placeholder { color:#f00; font-size:12px; }

特别说明,如上是拆开写的,如果使用逗号隔开多个选择符,在这里会带来麻烦:

input:-ms-input-placeholder,
input:-moz-placeholder,
input::-moz-placeholder,
input::-webkit-input-placeholder,
input::placeholder { color:#f00; font-size:12px; }

以上代码在 Chrome、Firefox 中均不生效,如果我们将第 1 行(-ms 这行)拆开单独写,它在 Chrome 中不生效,但在 Firefox 中生效,如果我们继续拆,它又在 2 个浏览器中均生效。

相关文章