本文摘自PHP中文网，作者不言，侵删。
这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识，需要的朋友可以参考下
Chrome支持input=[type=text]占位文本属性，但下列CSS样式却不起作用：
CSS 1 2 3 | input[placeholder], [placeholder], *[placeholder] {
color:red !important;
}
|
HTML input语句
1 | <input type="text" placeholder="Value" />
|
运行结果值还是灰色，Color：red没有作用。有什么方法可以修改占位文本的颜色吗？我在浏览器里安装了jQuery占位文本插件，但仍然无用。(!important只有IE7和firefox能识别）
回答：
toscho：有三种实现方式：伪元素（pseudo-elements）、伪类（ pseudo-classes）和Notihing。
WebKit和Blink（Safari,Google Chrome, Opera15+）使用伪元素
1 | ::-webkit-input-placeholder
|
Mozilla Firefox 4-18使用伪类
Mozilla Firefox 19+ 使用伪元素
IE10使用伪类
IE9和Opera12以下版本的CSS选择器均不支持占位文本。需要注意的是伪元素在Shadow DOM里会起到元素的真实作用。
CSS选择器
因为每个浏览器的CSS选择器都有所差异，所以需要针对每个浏览器做单独的设定。
1 2 3 4 5 6 7 8 9 10 11 12 | ::-webkit-input-placeholder {
color: #999;
}
:-moz-placeholder {
color: #999;
}
::-moz-placeholder {
color: #999;
}
:-ms-input-placeholder {
color: #999;
}
|
Matt：textareas（文本框可拉伸）风格样式的代码，如下：
1 2 3 4 5 6 | input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #636363;
}
|
brillout.com：input和Textarea的字体颜色均为红色。所有样式都要针对不同的选择器而定，不要打包整体处理，因为其中一个出问题，其他的都会失效。
1 2 3 4 5 6 7 8 9 10 | *::-webkit-input-placeholder {
color: red;
}
*:-moz-placeholder {
color: red;
}
*:-ms-input-placeholder {
color: red;
}
|
James Donnelly：在Firefox和IE里，正常input文本颜色覆盖占位符颜色的方法：
1 2 3 4 5 6 7 8 9 10 11 12 | ::-webkit-input-placeholder {
color: red; text-overflow: ellipsis;
}
:-moz-placeholder {
color: #acacac !important; text-overflow: ellipsis;
}
::-moz-placeholder {
color: #acacac !important; text-overflow: ellipsis;
}
:-ms-input-placeholder {
color: #acacac !important; text-overflow: ellipsis;
}
|
还有一种好办法:
1 2 3 4 5 6 7 8 9 10 11 12 | 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;
}
|
最后一种是从网上找的:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | $('[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修改占位符属性。
1 2 3 4 5 | form .placeholder {
color: #222;
font-size: 25px;
}
|
user1729061：不用CSS和占位文本，同样能得到相同效果。
1 2 | input type="text" value="placeholder text" onfocus="this.style.color='#000';
this.value='';" style="color: #f00;"/>
|
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
HTML5的contenteditable属性解析
以上就是关于HTML5 input placeholder 的颜色修改的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
HTML5实践-详细介绍css3中的几个属性text-shadow、box-shadow和border-radius
doctype html 什么意思?
html和HTML5的区别是什么
HTML5有哪些新特性？HTML5新特性详解
HTML5中布尔属性的hidden
讲讲HTML5中被废弃的标签
HTML5实践-如何使用css3丰富图片样式的详解（二）
HTML5的触摸事件
h5完成多图片上传的实例详解
button和input type=button的区别及注意事项
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 关于HTML5 input placeholder 的颜色修改
