css3如何设置placeholder的样式(2)-木庄网络博客

当前第2页返回上一页

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的兼容性：