30. CSS3选择器 :disabled选择器
:disabled
选择器刚好与:enabled
选择器相反,用来选择不可用表单元素。要正常使用:disabled
选择器,需要在表单元素的 HTML 中设置disabled
属性。
示例演示
通过: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); }
效果如下:
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系maynote@foxmail.com处理
码云笔记 » 30. CSS3选择器 :disabled选择器
码云笔记 » 30. CSS3选择器 :disabled选择器