5.设置input中placeholder属性的文字样式——软设问题总结系列
5.1 placeholder的定义和用法
placeholder
是HTML5 input的新属性,它一般表示input输入框的默认提示值;placeholder
属性提供可描述输入字段预期值的提示信息(hint);- 该提示会在输入字段为空时显示,并会在字段获得焦点时消失;
placeholder
属性适用于以下的<input>
类型:text
,search
,url
,telephone
,password
。
5.2 placeholder选择器
placeholder
属性选择器在各大浏览器都不太一样,如下:
/* Chrome/Opera/Safari */
::-webkit-input-placeholder {}
/* Firefox 19+ */
::-moz-placeholder {}
/* IE 10+ */
:-ms-input-placeholder {}
/* Firefox 18- */
:-moz-placeholder {}
5.3支持修改的属性
font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
text-indent
opacity
5.4 案例
以Google为例:
<!-- html -->
<input type="text" placeholder="提示信息">
<input type="search" placeholder="search类型">
input {
display: block;
margin-bottom: 10px;
}
常规效果图如下:
添加样式:
input[type='text']::-webkit-input-placeholder {
color: #000;
text-decoration: line-through;
}
效果图如下: