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 个浏览器中均生效。