使用CSS修改HTML5 input placeholder颜色
来源:互联网 发布:在淘宝上买狗安全吗 编辑:程序博客网 时间:2024/05/16 08:07
本文选自StackOverflow(简称:SOF)精选问答汇总系列文章之一,本系列文章将为读者分享国外最优质的精彩问与答,供读者学习和了解国外最新技术。本文将为读者讲解HTML5 Input Placeholder Color的个性化设定,需要针对不同浏览器内核来编程。
问题:
David Murdoch:Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用:
CSS1
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。(#换成@)
0 0
- 使用CSS修改HTML5 input placeholder颜色
- 使用CSS修改HTML5 input placeholder颜色
- 使用CSS修改HTML5 input placeholder颜色
- HTML5 input placeholder 颜色 修改
- HTML5 input placeholder 颜色修改
- CSS修改HTML5 placeholder颜色
- HTML5 input placeholder 颜色修改示例
- HTML5 input placeholder 颜色修改示例
- css修改input中placeholder 的字体颜色
- input placeholder 颜色修改示例
- 修改input里placeholder颜色
- css 修改placeholder的颜色
- 修改input标签的placeholder的颜色
- css3 input placeholder颜色修改方法
- 修改输入框placeholder文字默认颜色-webkit-input-placeholder
- 修改输入框placeholder文字默认颜色-webkit-input-placeholder
- 修改输入框placeholder文字默认颜色-webkit-input-placeholder
- 修改输入框placeholder文字默认颜色-webkit-input-placeholder
- 在xml文件中定义图片数组
- iis网站由2.0升级4.0报404错误
- JVM、JRE、JDK
- [Ruby] 中define_method 的使用
- leetcode182-Duplicate Emails(找出出现重复的数据)
- 使用CSS修改HTML5 input placeholder颜色
- PHP 常用函数整理
- C++多线程编程简单实例(转载的,留着备用)
- Linux-source和export命令小结
- CF 324C. Marina and Vasya
- 公司、办公司内如何限制上外网因特网、只能连内网局域网 - 注册表工具软件、批处理办法 - 注册表转换成批处理BAT,批处理如何修改注册表
- 自定义Django Form中choicefield下拉菜单选取数据库内容
- Android Studio 2.0出炉
- php 比较字符串或文章的相似度