关于HTML5 input placeholder 的颜色修改

input[placeholder], [placeholder], *[placeholder] {
     color:red !important;
 }
    

HTML input语句

input type="text" placeholder="Value" />
    

运行结果值还是灰色，Color：red没有作用。有什么方法可以修改占位文本的颜色吗？我在浏览器里安装了jquery占位文本插件，但仍然无用。(!important只有IE7和firefox能识别）

回答：

toscho：有三种实现方式：伪元素（pseudo-elements）、伪类（ pseudo-classes）和Notihing。
webkit和Blink（Safari,GOOGLE Chrome, opera15+）使用伪元素

::-webkIT-input-placeholder

Mozilla Firefox 4-18使用伪类

:-moz-placeholder

Mozilla Firefox 19+ 使用伪元素

::-moz-placeholder

IE10使用伪类

:-ms-input-placeholder

IE9和Opera12以下版本的CSS选择器均不支持占位文本。需要注意的是伪元素在Shadow DOM里会起到元素的真实作用。

CSS选择器

因为每个浏览器的CSS选择器都有所差异，所以需要针对每个浏览器做单独的设定。

::-webkit-input-placeholder {
     /* WebKit browsers */ color: #999;
 }
 :-moz-placeholder {
     /* Mozilla Firefox 4 to 18 */ color: #999;
 }
 ::-moz-placeholder {
     /* Mozilla Firefox 19+ */ color: #999;
 }
 :-ms-input-placeholder {
     /* internet Explorer 10+ */ color: #999;
 }
    

Matt：textareas（文本框可拉伸）风格样式的代码，如下：

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
     color: #636363;
 }
 input:-moz-placeholder, textarea:-moz-placeholder {
     color: #636363;
 }
    

brillout.COM：input和Textarea的字体颜色均为红色。所有样式都要针对不同的选择器而定，不要打包整体处理，因为其中一个出问题，其他的都会失效。

*::-webkit-input-placeholder {
     color: red;
 }
 *:-moz-placeholder {
     color: red;
 }
 *:-ms-input-placeholder {
     /* IE10+ */ color: red;
 }
    

James Donnelly：在Firefox和IE里，正常input文本颜色覆盖占位符颜色的方法：

::-webkit-input-placeholder {
     color: red;
     text-overflow: ellipsis;
 }
 :-moz-placeholder {
     color: #acacac !important;
     text-overflow: ellipsis;
 }
 ::-moz-placeholder {
     color: #acacac !important;
     text-overflow: ellipsis;
 }
 /* for the Future */ :-ms-input-placeholder {
     color: #acacac !important;
     text-overflow: ellipsis;
 }
    

还有一种好办法:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
     color: #666;
 }
 input:-moz-placeholder, textarea:-moz-placeholder {
     color: #666;
 }
 input::-moz-placeholder, textarea::-moz-placeholder {
     color: #666;
 }
 input:-ms-input-placeholder, textarea:-ms-input-placeholder {
     color: #666;
 }
    

最后一种是从网上找的:

$('[placeholder]').focus(function() {
     VAR input = $(this);
 if (input.val() == input.attr('placeholder')) {
     input.val('');
     input.removeClass('placeholder');
 }
 }
).blur(function() {
     var input = $(this);
 if (input.val() == '' || input.val() == input.attr('placeholder')) {
     input.addClass('placeholder');
     input.val(input.attr('placeholder'));
 }
 }
    ).blur();
 $('[placeholder]').parents('form').submit(function() {
 $(this).find('[placeholder]').each(function() {
     var input = $(this);
 if (input.val() == input.attr('placeholder')) {
     input.val('');
 }
 }
) }
    );
    

这个代码调用的规则是，先加载Javascript再用CSS修改占位符属性。

form .placeholder {
     color: #222;
     font-Size: 25px;
 /* etc */ }
    

user1729061：不用CSS和占位文本，同样能得到相同效果。

input type="text" value="placeholder text" onfocus="this.style.color='#000';
     this.value='';
    " style="color: #f00;
    "/>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

HTML5的contenteditable属性解析

以上就是关于HTML5 input placeholder 的颜色修改的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！