作者:追梦的青春灬_176 | 来源:互联网 | 2020-08-21 15:36
本篇文章给大家带来的内容是介绍如何使用css3设置placeholder的样式,让大家了解placeholder是什么,如何使用,如何修改修改(设置)其样式。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
首先我们来了解一下placeholder是什么?
placeholder是HTML5新增的一个属性,该属性的作用是规定可描述输入字段预期值的简短的提示信息,这个提示会在用户输入之前显示在输入框中,然后在用户输入字段后消失。【相关视频教程推荐: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;
}
效果图:
::-moz-placeholder 伪元素在Firefox 19+后替代了之前的 :-moz-placeholder 伪类
总结:以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。
以上就是css3如何设置placeholder的样式的详细内容,更多请关注 第一PHP社区 其它相关文章!