使用 :disabled 伪类可选中禁用的表单元素，通过调整颜色、透明度和边框样式提升界面可读性；例如设置 background-color、color 和 opacity 来弱化外观，并结合其他选择器精细控制不同控件的禁用状态，有效改善用户体验。
当表单元素被设置为 disabled 状态时，用户无法与其交互。CSS 提供了 :disabled 伪类来专门选中这些禁用的表单控件，比如 、、 等。通过它，我们可以统一调整禁用状态下的外观，比如颜色、透明度和边框样式，提升界面可读性和用户体验。
使用 :disabled 选择禁用元素
:disabled 可以作用于任何支持禁用状态的表单元素。只要 HTML 中设置了 disabled 属性，该元素就会被此伪类匹配。
例如：
input:disabled {
background-color: #f0f0f0;
color: #999;
border: 1px solid #ccc;
}
这段样式会让所有被禁用的输入框背景变浅、文字变灰，并使用柔和的边框，视觉上明确表示“不可操作”。
立即学习“前端免费学习笔记（深入）”；
调整颜色与透明度增强视觉反馈
为了让禁用状态更明显，常通过降低颜色饱和度或增加透明度来弱化元素。结合 opacity 或 rgba() 颜色值，能实现更细腻的控制。
- 使用 opacity: 0.6 整体降低元素透明度，简单有效
- 用 color: rgba(0, 0, 0, 0.4) 精确控制文字颜色的透明度
- 背景色也可使用 rgba 避免完全失去层次感
示例：
button:disabled {
background-color: #4a90e2;
color: rgba(255, 255, 255, 0.6);
opacity: 0.7;
cursor: not-allowed;
}
这样按钮在禁用时仍保留一定质感，同时明确传达不可点击的状态。
组合其他伪类实现更精细控制
有时需要区分不同类型的输入控件，可以将 :disabled 与其他选择器结合使用。
-
textarea:disabled单独设置多行文本域样式 -
input[type="checkbox"]:disabled控制复选框的禁用外观 -
select:disabled调整下拉菜单的显示效果
例如让禁用的复选框更小且颜色更淡：
input[type="checkbox"]:disabled {
transform: scale(0.8);
accent-color: #bbb;
}
基本上就这些。合理使用 :disabled 不仅能让界面更清晰，还能避免用户误操作。不复杂但容易忽略。
