这篇文章将为大家详细讲解有关css3设置placeholder样式的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
成都创新互联，为您提供网站建设公司、成都网站制作、网站营销推广、网站开发设计，对服务成都纯水机等多个行业拥有丰富的网站建设及推广经验。成都创新互联网站建设公司成立于2013年,提供专业网站制作报价服务,我们深知市场的竞争激烈，认真对待每位客户，为客户提供赏心悦目的作品。 与客户共同发展进步，是我们永远的责任！
首先我们来了解一下placeholder是什么？
placeholder是HTML5新增的一个属性，该属性的作用是规定可描述输入字段预期值的简短的提示信息，这个提示会在用户输入之前显示在输入框中，然后在用户输入字段后消失。
根据浏览器的不同，当输入字段（框）成为焦点时，该提示信息（占位符）可能会保持可见，也可能不会保持可见。例如，IE10 +将在输入聚焦时会隐藏，即使它仍为空。
适用范围：
placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。
兼容性：
因为是HTML5中的新增属性，所以会存在兼容性的问题。下面我们来看看浏览器的支持情况：
表格中的数字表示支持该属性的第一个浏览器版本号。
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是用于设置对象文字占位符的样式。【相关视频教程推荐：CSS3教程】
说明：
::placeholder 伪元素用于控制表单输入框占位符的外观，它允许开发者/设计师改变文字占位符的样式，默认的文字占位符为浅灰色。当表单背景色为类似的颜色时它可能效果并不是很明显，那么就可以使用这个伪元素来改变文字占位符的颜色。
注意：
有些浏览器有自己的::placeholder伪元素非标准实现。所有这些实现都需要浏览器前缀。这些实施方式的示例是::-webkit-input-placeholder，:-ms-input-placeholder（单冒号），并且:-moz-placeholder已Firefox 19弃用，现在支持更新的是::-moz-placeholder伪元素。
除了Firefox是 ::[prefix]placeholder，其他浏览器都是使用 ::[prefix]input-placeholder。
伪元素::placeholder的兼容性：
::-moz-placeholder 伪元素在Firefox 19+后替代了之前的 :-moz-placeholder 伪类
关于css3设置placeholder样式的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
