标签:
本文选自StackOverflow(简称:SOF)精选问答汇总系列文章之一,本系列文章将为读者分享国外最优质的精彩问与答,供读者学习和了解国外最新技术。本文将为读者讲解HTML5 Input Placeholder Color的个性化设定,需要针对不同浏览器内核来编程。
问题:
David Murdoch:Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用:
CSSinput[placeholder], [placeholder], *[placeholder] {
color
:
red
!important
;
}
<
input
type
=
"text"
placeholder
=
"Value"
/>
运行结果值还是灰色,Color:red没有作用。有什么方法可以修改占位文本的颜色吗?我在浏览器里安装了jQuery占位文本插件,但仍然无用。
回答:
toscho:有三种实现方式:伪元素(pseudo-elements)、伪类( pseudo-classes)和Notihing。
WebKit和Blink(Safari,Google Chrome, Opera15+)使用伪元素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;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color:
#636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color:
#636363;
}
*::-webkit-input-placeholder {
color: red;
}
*:-moz-placeholder {
color: red;
}
*:-ms-input-placeholder {
/* IE10+ */
color: red;
}
::-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;
}
<input type=
"text"
value=
"placeholder text"
onfocus=
"this.style.color=‘#000‘;
this.value=‘‘;"
style=
"color: #f00;"
/>
用css修改HTML5 input placeholder颜色
标签:
原文地址:http://www.cnblogs.com/shirleys/p/4269333.html