标签：
有三种实现方式：伪元素（pseudo-elements）、伪类（ pseudo-classes）和Notihing。
WebKit和Blink（Safari,Google Chrome, Opera15+）使用伪元素
::-webkit-input-placeholder
:-moz-placeholder
::-moz-placeholder
:-ms-input-placeholder
因为每个浏览器的CSS选择器都有所差异，所以需要针对每个浏览器做单独的设定。
1 ::-webkit-input-placeholder { /* WebKit browsers */ 2 color: #999; 3 } 4 :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 5 color: #999; 6 } 7 ::-moz-placeholder { /* Mozilla Firefox 19+ */ 8 color: #999; 9 } 10 :-ms-input-placeholder { /* Internet Explorer 10+ */ 11 color: #999; 12 }
textareas（文本框可拉伸）风格样式的代码，如下：
1 input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 2 color: #636363; 3 } 4 input:-moz-placeholder, textarea:-moz-placeholder { 5 color: #636363; 6 }
input和Textarea的字体颜色均为红色。所有样式都要针对不同的选择器而定，不要打包整体处理，因为其中一个出问题，其他的都会失效。
1 *::-webkit-input-placeholder { 2 color: red; 3 } 4 *:-moz-placeholder { 5 color: red; 6 } 7 *:-ms-input-placeholder { 8 /* IE10+ */ 9 color: red; 10 }
在Firefox和IE里，正常input文本颜色覆盖占位符颜色的方法：
1 ::-webkit-input-placeholder { 2 color: red; text-overflow: ellipsis; 3 } 4 :-moz-placeholder { 5 color: #acacac !important; text-overflow: ellipsis; 6 } 7 ::-moz-placeholder { 8 color: #acacac !important; text-overflow: ellipsis; 9 } /* for the future */ 10 :-ms-input-placeholder { 11 color: #acacac !important; text-overflow: ellipsis; 12 }
还有一种好办法:
1 input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 2 color: #666; 3 } 4 input:-moz-placeholder, textarea:-moz-placeholder { 5 color: #666; 6 } 7 input::-moz-placeholder, textarea::-moz-placeholder { 8 color: #666; 9 } 10 input:-ms-input-placeholder, textarea:-ms-input-placeholder { 11 color: #666; 12 }
如何修改HTML5 input placeholder 颜色
标签：
原文地址：http://www.cnblogs.com/wangyongx/p/5080538.html
