共计 1113 个字符,预计需要花费 3 分钟才能阅读完成。
在 HTML5 中新增了许多新特性,其中 placeholder 就是其中之一。placeholder 属性规定可描述输入字段预期值的简短的提示信息。该提示会在用户输入值之前显示在输入字段中。
placeholder 属性适用于下面的表单 input 类型:text、search、url、tel、email 和 password。IE10、Firefox、Opera、Chrome 和 Safari 支持 placeholder 属性。在支持 placeholder 属性的浏览器中,placeholder 默认显示为灰色。例如下面的示例:
默认的 placeholder 示例: 电子邮件 用户名
我们可以通过 CSS 来控制 placeholder 占位文字的样式。各个浏览器厂商都为 placeholder 属性提供了各自版本的伪类控制属性:
::-webkit-input-placeholder{} /* 使用 webkit 内核的浏览器 */
::-moz-placeholder{} /* Firefox 版本 19+ */
:-moz-placeholder{} /* Firefox 版本 4 -18 */
:-ms-input-placeholder{} /* IE 浏览器 */
通过这些伪类,我们就可以修改 placeholder 占位文字的样式。
修改后的 placeholder 示例: 电子邮件 用户名
生成上面的 placeholder 占位文字样式的 CSS 代码如下:
input[type="email"]::-webkit-input-placeholder {color:#FFF; background:blue;}
input[type="email"]::-moz-placeholder {color:#FFF; background:blue;} /* firefox 19+ */
input[type="email"]:-moz-placeholder {color:#FFF; background:blue;}
input[type="email"]:-ms-input-placeholder {color:#FFF; background:blue;} /* ie */
input[type="text"]::-webkit-input-placeholder {color:green;}
input[type="text"]::-moz-placeholder {color:green;} /* firefox 19+ */
input[type="text"]:-moz-placeholder {color:green;}
input[type="text"]:-ms-input-placeholder {color:green;} /* ie */
正文完