29. CSS3选择器 :enabled选择器
在 Web 的表单中,有些表单元素有可用(:enabled
)和不可用(:disabled
)状态,比如输入框,密码框,复选框等。在默认情况之下,这些表单元素都处在可用状态。那么我们可以通过伪选择器:enabled
对这些表单元素设置样式。
示例演示
通过:enabled
选择器,修改文本输入框的边框为 2 像素的红色边框,并设置它的背景为灰色。
HTML 代码:
<form action="#"> <div> <label for="name">Text Input:</label> <input type="text" name="name" id="name" placeholder="可用输入框" /> </div> <div> <label for="name">Text Input:</label> <input type="text" name="name" id="name" placeholder="禁用输入框" disabled="disabled" /> </div> </form>
CSS 代码:
div{ margin: 20px; } input[type="text"]:enabled { background: #ccc; border: 2px solid red; }
效果如下:
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 29. CSS3选择器 :enabled选择器
码云笔记 » 29. CSS3选择器 :enabled选择器