怎么样设置placeholder的样式
第一大家来认识一下placeholder是什么?
placeholder是HTML5新增的一个属性,该属性有哪些用途是规定可描述输入字段预期值的简短的提示信息,这个提示会在用户输入之前显示在输入框中,然后在用户输入字段后消失。【有关视频课程推荐:HTML5课程】
依据浏览器的不同,当输入字段(框)成为焦点时,该提示信息(占位符)或许会维持可见,也会不会维持可见。比如,IE10+将在输入聚焦时会隐藏,即便它仍为空。
适用范围:
placeholder属性适用于下面的input种类:text、search、url、tel、email和password。
兼容性:
由于是HTML5中的新增属性,所以会存在兼容性的问题。下面大家来看看浏览器的支持状况:
2.jpg
表格中的数字表示支持该属性的第一个浏览器版本号。
placeholder属性的基本使用方法,举例说明:
用户名:<inputtype="text"placeholder="请输入用户名"><br/>
密 码:<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。
本文转载自中文网
希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
►本文网址:http://www.nsxcb.cn/CSS/CSS3/20220510/14148.html
►凡本站提供教程均已验证教程的准确性。