时间:2021-04-16
placeholder是HTML5 input的新属性,英文意思是占位符,它一般表示input输入框的默认提示值。
当然我们今天讨论的不是placeholder这个属性,而是设置placeholder的文本样式的选择器。
实例demo
火狐和webkit核心浏览器的属性名字不一样。
#field1::-webkit-input-placeholder { color:#00f; }
#field2::-webkit-input-placeholder {
color:#090;
background:lightgreen;
text-transform:uppercase;
}
#field3::-webkit-input-placeholder {
font-style:italic;
text-decoration:overline;
letter-spacing:3px;
color:#999;
}
#field1::-moz-placeholder { color:#00f; }
#field2::-moz-placeholder {
color:#090;
background:lightgreen;
text-transform:uppercase;
}
#field3::-moz-placeholder {
font-style:italic;
text-decoration:overline;
letter-spacing:3px;
color:#999;
}
当然,和CSS设置::selection选中文本样式一样,你只能设置几个和文本有关系的CSS样式:Color, font-style, font-varian, background, text-decoration。
实例demo
PS:IE从IE 10才开始支持placeholder属性,伪选择器名字还不得而知,估计是加前缀-ms-了。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用:CSS复制代码代码如下:input[placeholder],[pl
自定义占位文本(placeholder)的样式当我们对input元素或者textarea元素写CSS样式的时候,如果需要自定义占位文本(也就是placehold
设置input中placeholder字体颜色input::-webkit-input-placeholder{color:@a;}input:-moz-p
实例1 带有placeholder文本的两个输入字段: placeholder文本也可以指定颜色。 实例2 带有placeholder文本设置颜色:
可以用html5中的属性<input="text"placeholder="你想输入的内容">也可以用js做到加css样式复制代码代码如下:.in_search