第一大家来认识一下placeholder是什么？

　　placeholder是HTML5新增的一个属性，该属性有哪些用途是规定可描述输入字段预期值的简短的提示信息，这个提示会在用户输入之前显示在输入框中，然后在用户输入字段后消失。【有关视频课程推荐：HTML5课程】

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

　　适用范围：

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

　　兼容性：

　　由于是HTML5中的新增属性，所以会存在兼容性的问题。下面大家来看看浏览器的支持状况：

　　2.jpg

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

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

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

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

　　成效图：

　　1.gif

　　通常情况下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;

　　}

　　成效图：

　　3.jpg

　　可以看出，大家是通过css3的::placeholder伪元素来设置placeholder属性样式的。在css3中，伪元素::placeholder是用于设置对象文字占位符的样式。【有关视频课程推荐：CSS3课程】

　　说明：

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

　　注意：

　　有的浏览器有我们的::placeholder伪元素非标准达成。所有这类达成都需要浏览器前缀。这类推行方法的示例是::-webkit-input-placeholder，:-ms-input-placeholder（单冒号），并且:-moz-placeholder已Firefox19弃用，目前支持更新的是::-moz-placeholder伪元素。

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


本文转载自中文网

希望以上内容可以解决您的问题！
如有其他问题欢迎大家一起交流学习！