本文介绍了 CSS 中的 :disabled 选择器，该选择器用于为表单中的不可用元素设置样式。通过简单的 HTML 示例展示了如何应用 :disabled 和 :enabled 选择器来区分可用与不可用的输入框。
十一，:disabled选择器
一看这个属性就知道是专为表单元素提供的。在表单中输入框，密码框，复选框都有可用(:enabled)和不可用（:disabled）状态，默认情况，这些表单元素都处在可用状态。可通过选择器:enabled为这些表单元素设置样式。
代码例子：可用输入框设置样式
<!DOCTYPE HTML>
<meta charset="utf-8">
<style>
div {
margin: 30px;
}
input[type="text"]:enabled {
border: 1px solid #f36;
box-shadow: 0 0 5px #f36;
}
</style>
<form action="#">
<div>
<label>可用输入框:<input type="text"/></label>
</div>
<div>
<label>禁用输入框:<input type="text" disabled="disabled"/></label>
</div>
</form>
</body>
</html>
运行效果：
注： 看到有【:enabled】选择器，就知道肯定有【:disabled】选择器了。看名字就知道:disabled选择器和:enabled选择器相反，用来匹配不可用的表单元素。要使用:disabled选择器，需要在表单元素中设置"disbled"属性
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
