【CSS3】:disabled选择器
2016-02-23 17:14
615 查看
“:disabled”选择器刚好与“:enabled”选择器相反,用来选择不可用表单元素。要正常使用“:disabled”选择器,需要在表单元素的HTML中设置“disabled”属性。
示例演示
通过“:disabled”选择器,给不可用输入框设置明显的样式。
HTML代码:
CSS代码
结果演示:
示例演示
通过“:disabled”选择器,给不可用输入框设置明显的样式。
HTML代码:
<form action="#"> <div> <input type="text" name="name" id="name" placeholder="我是可用输入框" /> </div> <div> <input type="text" name="name" id="name" placeholder="我是不可用输入框" disabled /> </div> </form>
CSS代码
form { margin: 50px; } div { margin-bottom: 20px; } input { background: #fff; padding: 10px; border: 1px solid orange; border-radius: 3px; } input[type="text"]:disabled { background: rgba(0,0,0,.15); border: 1px solid rgba(0,0,0,.15); color: rgba(0,0,0,.15); }
结果演示:
![](http://img.mukewang.com/53326c450001881402490139.jpg)
相关文章推荐
- 【CSS3】:enabled选择器
- 7个你可能不认识的CSS单位:rem vh vw vmin vmax ex ch
- CSS3笔记
- css之!important 及display:inline 及clear:both
- css中a标签内容超出最大字数隐藏处理
- JS、CSS 文件的版本号控制
- CSS3 新属性
- 【CSS3】only-of-type选择器
- 【CSS3】only-child选择器
- css 学习1 css基础
- 【CSS3】nth-last-of-type(n)选择器
- 【CSS3】last-of-type选择器
- 【CSS3】nth-of-type(n)选择器
- 【CSS3】first-of-type选择器
- 【CSS3】结构性伪类选择器—nth-last-child(n)
- 【CSS3】结构性伪类选择器—nth-child(n)
- 【CSS3】结构性伪类选择器—last-child
- 【CSS3】结构性伪类选择器—first-chi
- 【CSS3】结构性伪类选择器—target
- 下拉菜单之CSS实现