使用:disabled伪类可选中禁用表单元素并设置样式，如背景色、文字色等；也可限定元素类型或结合属性选择器[disabled]进行更精确控制。
要通过 CSS 选择 disabled 的表单元素，可以使用伪类 :disabled。这个选择器能匹配所有被设置为 disabled 属性的表单控件，比如输入框、按钮、下拉框等。
使用 :disabled 伪类
:disabled 会选中所有处于禁用状态的表单元素。例如：
:disabled {
background-color: #f2f2f2;
color: #888;
border: 1px solid #ccc;
}
这段样式会让所有禁用的元素背景变灰、文字颜色变浅。
针对特定表单元素设置样式
你也可以限定只对某类元素应用样式，提高精确度：
立即学习“前端免费学习笔记（深入）”；
- input:disabled —— 只选中被禁用的输入框
- button:disabled —— 只选中被禁用的按钮
- select:disabled —— 作用于禁用的下拉菜单
- textarea:disabled —— 用于禁用的文本域
示例：
input:disabled {
opacity: 0.6;
}
button:disabled {
cursor: not-allowed;
background-color: #ddd;
}
结合 class 或属性选择器增强控制
如果想更精细地控制，可以结合 class 或 disabled 属性本身：
[disabled] {
pointer-events: none;
}
.my-form input[disabled] {
border-color: #e0e0e0;
}
使用属性选择器 [disabled] 在某些情况下兼容性更好，也能实现类似效果。
基本上就这些。使用 :disabled 是最标准、简洁的方式，适用于现代浏览器。注意确保元素确实有 disabled 属性，否则样式不会生效。
