:enabled和:disabled伪类用于区分表单元素的可交互状态。1. :enabled匹配可操作元素，如可输入文本框；2. :disabled匹配添加disabled属性的元素，常为不可编辑状态。常见应用包括设置不同背景色、文字颜色及光标样式，例如禁用时背景变灰、文字变淡并显示not-allowed光标。3. 实际场景中常用于提交按钮防重复提交，结合JavaScript动态控制状态，样式自动切换。4. 可配合input:disabled::placeholder调整禁用状态下占位符颜色，保持界面一致性。合理使用能提升表单可用性与视觉反馈效果。
在CSS中，:enabled 和 :disabled 是伪类选择器，用于根据表单元素是否可交互来应用不同的样式。它们常用于提升用户体验，通过视觉反馈让用户清楚哪些输入框可以操作，哪些已被禁用。
理解 :enabled 和 :disabled 伪类
:enabled 匹配当前可以被用户操作的表单元素，比如可点击的按钮、可输入的文本框等。:disabled 则匹配那些设置了 disabled 属性的元素，这些元素通常不可点击或不可编辑。
常见支持这些伪类的表单元素包括：
- input
- textarea
- select
- button
- option
基本使用方法
你可以直接在CSS中为启用或禁用状态的元素定义样式。例如：
立即学习“前端免费学习笔记（深入）”；
input:enabled {
background-color: #fff;
border: 1px solid #ccc;
color: #000;
}
input:disabled {
background-color: #f5f5f5;
border: 1px solid #ddd;
color: #999;
cursor: not-allowed;
}
这样，当输入框被禁用时，背景变灰，文字颜色变淡，并显示禁止光标，直观提示用户无法输入。
实际应用场景
在表单提交过程中，常会禁用提交按钮防止重复提交，此时可用 :disabled 来调整按钮样式：
button[type="submit"]:disabled {
opacity: 0.6;
background-color: #4CAF50;
cursor: default;
}
button[type="submit"]:enabled {
background-color: #4CAF50;
transition: background-color 0.3s;
}
结合JavaScript动态控制 disabled 属性，样式会自动切换。比如填写完必填项后按钮变为可用，视觉上也会恢复高亮。
与占位符样式的配合
当输入框被禁用时，其占位符（placeholder）颜色也可能需要调整，以保持一致性：
input:disabled::placeholder {
color: #ccc;
}
这能避免禁用状态下占位文字仍然过暗或过亮，影响整体界面协调性。
基本上就这些。合理使用 :enabled 和 :disabled 能让表单更易用，样式更具响应性，无需JavaScript干预即可实现状态驱动的视觉变化。关键是保持视觉差异明显但不过度突兀。不复杂但容易忽略细节。
