使用: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 —— 用于禁用的文本域

示例：

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

74

查看详情

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 属性，否则样式不会生效。

以上就是如何通过