:disabled伪类用于选中禁用的表单元素并设置样式，如input:disabled{background-color:#f2f2f2;color:#999;cursor:not-allowed;}，适用于input、button、textarea、select等元素，配合disabled属性实现视觉提示，提升用户体验。
在 CSS 中，:disabled 是一个伪类选择器，用于选中处于禁用状态的表单元素。当一个表单元素（如 input、button、select 等）设置了 disabled 属性时，就可以通过 :disabled 来为其设置特定样式。
如何使用 :disabled 伪类
只需要在选择器后面加上 :disabled，即可为禁用状态的元素定义样式。例如：
input:disabled {
background-color: #f2f2f2;
color: #999;
border: 1px solid #ccc;
cursor: not-allowed;
}
这段代码会让所有被禁用的输入框背景变灰、文字变浅，并显示“禁止操作”的鼠标指针。
常见可应用元素
以下类型的表单元素支持 :disabled 伪类：
立即学习“前端免费学习笔记（深入）”；
- input — 文本框、复选框、单选按钮等
- textarea — 多行文本输入框
- button — 按钮
- select — 下拉选择框
示例：让禁用的按钮看起来更明显
button:disabled {
opacity: 0.6;
background-color: gray;
color: white;
cursor: default;
}
注意事项
确保 HTML 元素确实含有 disabled 属性，CSS 才会生效。例如：
如果使用 JavaScript 动态启用/禁用元素，样式也会自动切换。
基本上就这些，不复杂但容易忽略细节。正确使用 :disabled 能提升表单的用户体验。
