css伪类:disabled是用来匹配处于禁用状态的表单控件的伪类选择器，当表单控件被设置了disabled属性后，就可以通过这个伪类来为其设置专属的样式，不需要额外添加类名就能实现状态区分。
:disabled伪类的基本语法
:disabled伪类的语法非常简单，直接作为选择器的一部分使用即可，它会自动匹配所有带有disabled属性的表单控件，常见的适用控件包括<input>、<textarea>、<select>、<button>等。
基本的使用示例如下：
/* 匹配所有禁用的表单控件 */
:disabled {
background-color: #f5f5f5;
color: #999;
cursor: not-allowed;
}
不同表单控件的使用示例
输入框和文本域
对于<input>和<textarea>控件，添加disabled属性后，:disabled伪类就会生效，下面是一段完整的示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
/* 禁用状态的输入框样式 */
input:disabled, textarea:disabled {
background-color: #eee;
border: 1px solid #ddd;
color: #666;
cursor: not-allowed;
}
/* 正常状态的输入框样式 */
input, textarea {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
width: 300px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p>正常输入框：<input type="text" placeholder="可输入内容"></p>
<p>禁用输入框：<input type="text" placeholder="不可输入" disabled></p>
<p>正常文本域：<textarea rows="3" placeholder="可输入内容"></textarea></p>
<p>禁用文本域：<textarea rows="3" placeholder="不可输入" disabled></textarea></p>
</body>
</html>
下拉选择框和按钮
<select>和<button>控件同样支持:disabled伪类，示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
select:disabled, button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
select, button {
padding: 6px 12px;
margin-bottom: 10px;
border-radius: 4px;
}
button {
background-color: #1890ff;
color: white;
border: none;
}
button:disabled {
background-color: #91d5ff;
}
</style>
</head>
<body>
<p>正常下拉框：
<select>
<option>选项一</option>
<option>选项二</option>
</select>
</p>
<p>禁用下拉框：
<select disabled>
<option>选项一</option>
<option>选项二</option>
</select>
</p>
<p><button>可点击按钮</button></p>
<p><button disabled>禁用按钮</button></p>
</body>
</html>
使用注意事项
- :disabled伪类只能匹配带有disabled属性的表单控件，其他元素设置disabled属性不会生效。
- 如果同时设置了控件的disabled和readonly属性，:disabled伪类依然会生效，因为disabled的优先级更高。
- 禁用状态的表单控件默认不会触发鼠标事件，所以设置cursor: not-allowed可以给用户更明确的状态提示。
- 如果需要兼容旧版本浏览器，可以测试:disabled伪类的支持情况，大部分现代浏览器都支持这个伪类。
常见问题解答
为什么我的:disabled样式没有生效？
首先检查控件是否确实添加了disabled属性，其次检查样式选择器的优先级是否足够，可能存在其他更高优先级的样式覆盖了:disabled的样式。另外要注意不要在<code>:disabled</code>选择器中写不符合语法的样式规则。
可以单独为某类控件设置:disabled样式吗？
可以，只需要在:disabled前面加上对应的元素选择器即可，比如input:disabled</code>就只会匹配禁用的输入框，不会影响其他类型的表单控件。