css自定义占位文本(placeholder)的样式的方法示例

自定义占位文本(placeholder)的样式

用法

HTML

<input placeholder="我是红色的！">

CSS

input::placeholder { color: red; font-size: 1.2em; font-style: italic; }

结果

但要注意, 这个伪元素选择器是一个实验性的特性, 还需要一些时日待浏览器兼容.
 

因此, 我们要添加一些前缀来使用它, 如下所示.

input::-webkit-input-placeholder { color: #999; } /* IE10+ */ input:-ms-input-placeholder { color: #999; } /* Firefox4-18 */ input:-moz-placeholder { color: #999; } /* Firefox19+ */ input::-moz-placeholder { color: #999; } input::placeholder { color: #999; } textarea::-webkit-input-placeholder { color: #999; } /* IE10+ */ textarea:-ms-input-placeholder { color: #999; } /* Firefox4-18 */ textarea:-moz-placeholder { color: #999; } /* Firefox19+ */ textarea::-moz-placeholder { color: #999; } textarea::placeholder { color: #999; }

参考链接:
MDN - ::placeholder

（编辑：ASP站长网）