本文选自StackOverflow(简称:SOF)精选问答汇总系列文章之一,本系列文章将为读者分享国外最优质的精彩问与答,供读者学习和了解国外最新技术。本文将为读者讲解HTML5 Input Placeholder Color的个性化设定,需要针对不同浏览器内核来编程。
问题:
David Murdoch:Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用:
CSS
1
2
3
|
input[placeholder], [placeholder], *[placeholder] {
color
:
red
!important
;
}
|
1
|
<
input
type
=
"text"
placeholder
=
"Value"
/>
|
运行结果值还是灰色,Color:red没有作用。有什么方法可以修改占位文本的颜色吗?我在浏览器里安装了jQuery占位文本插件,但仍然无用。
回答:
toscho:有三种实现方式:伪元素(pseudo-elements)、伪类( pseudo-classes)和Notihing。
WebKit和Blink(Safari,Google Chrome, Opera15+)使用伪元素
1
|
::-webkit-input-placeholder
|
1
|
:-moz-placeholder
|
1
|
::-moz-placeholder
|
1
|
:-ms-input-placeholder
|
IE9和Opera12以下版本的CSS选择器均不支持占位文本。需要注意的是伪元素在Shadow DOM里会起到元素的真实作用。
CSS选择器
因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定。
1
2
3
4
5
6
7
8
9
10
11
12
|
::-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;
}
|
1
2
3
4
5
6
|
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color:
#636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color:
#636363;
}
|
1
2
3
4
5
6
7
8
9
10
11
12
|
*::-webkit-input-placeholder {
color: red;
}
*:-moz-placeholder {
color: red;
}
*:-ms-input-placeholder {
/* IE10+ */
color: red;
}
|
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;
}
/* for the future */
:-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(
''
);
}
})
});
|
1
2
3
4
5
|
form .placeholder {
color:
#222;
font-size: 25px;
/* etc */
}
|
1
2
|
<input type=
"text"
value=
"placeholder text"
onfocus=
"this.style.color='#000';
this.value='';"
style=
"color: #f00;"
/>
|
原文:Change an input's HTML5 placeholder color with CSS
文章选自StackOverFlow社区,鉴于其内容对于开发者有所帮助,现将文章翻译于此,供大家参考及学习。9Tech将每日持续更新,读者可点击StackOverflow(简称:SOF)精选问答汇总,查看全部译文内容。同时,我们也招募志同道合的技术朋友共同翻译,造福大家!报名请发邮件至zhangqi_wj#cyou-inc.com。(#换成@)