HTML5中如何设置placeholder的样式

这篇文章主要介绍了HTML5中如何设置placeholder的样式，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

　　首先我们来了解一下placeholder是什么？

　　placeholder是HTML5新增的一个属性，该属性的作用是规定可描述输入字段预期值的简短的提示信息，这个提示会在用户输入之前显示在输入框中，然后在用户输入字段后消失。

　　根据浏览器的不同，当输入字段（框）成为焦点时，该提示信息（占位符）可能会保持可见，也可能不会保持可见。例如，IE10+将在输入聚焦时会隐藏，即使它仍为空。

　　适用范围：

　　placeholder属性适用于下面的input类型：text、search、url、tel、email和password。

　　兼容性：

　　因为是HTML5中的新增属性，所以会存在兼容性的问题。下面我们来看看浏览器的支持情况：

　　2.jpg

　　表格中的数字表示支持该属性的第一个浏览器版本号。

　　placeholder属性的基本用法，举例说明：

　　用户名：<inputtype="text"placeholder="请输入用户名"><br/>

　　&nbsp;密&nbsp;码：<inputtype="password"placeholder="请输入密码">

　　一般情况下placeholder属性会有自己默认的样式，当有时为了页面的整体美观，我们就想要自定义样式，那么如何来设置placeholder的样式？

　　下面我们就通过简单的代码示例来介绍使用css3设置placeholder的样式的方法。

　　css3设置placeholder的样式代码示例：

　　input::-webkit-input-placeholder{

　　color:palevioletred;

　　}

　　input::-moz-placeholder{

　　color:palevioletred;

　　}

　　input:-ms-input-placeholder{

　　color:palevioletred;

　　}

　　input::-webkit-input-placeholder{

　　color:palevioletred;

　　}

　　input::placeholder{

　　color:palevioletred;

　　}

　　可以看出，我们是通过css3的::placeholder伪元素来设置placeholder属性样式的。在css3中，伪元素::placeholder是用于设置对象文字占位符的样式。

　　说明：

　　::placeholder伪元素用于控制表单输入框占位符的外观，它允许开发者/设计师改变文字占位符的样式，默认的文字占位符为浅灰色。当表单背景色为类似的颜色时它可能效果并不是很明显，那么就可以使用这个伪元素来改变文字占位符的颜色。

　　注意：

　　有些浏览器有自己的::placeholder伪元素非标准实现。所有这些实现都需要浏览器前缀。这些实施方式的示例是::-webkit-input-placeholder，:-ms-input-placeholder（单冒号），并且:-moz-placeholder已Firefox19弃用，现在支持更新的是::-moz-placeholder伪元素。

　　除了Firefox是::[prefix]placeholder，其他浏览器都是使用::[prefix]input-placeholder。

感谢你能够认真阅读完这篇文章，希望小编分享的“HTML5中如何设置placeholder的样式”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!