:enabled伪类用于选择可交互的表单元素，匹配未添加disabled属性的输入框、按钮等，通过设置边框、颜色、背景等样式区分可操作与不可操作状态，提升表单可用性与视觉一致性。
在网页表单中，输入框可能会因为状态不同而启用或禁用。使用CSS的:enabled伪类，可以专门针对可交互的输入框设置样式，提升用户体验。这个伪类匹配所有处于“可用”状态的表单元素，比如 、
什么是:enabled伪类？
:enabled 是CSS中用于选择处于启用状态的表单元素的伪类。只要元素没有添加 disabled 属性，就会被该伪类选中。常用于动态调整输入框外观，帮助用户快速识别哪些控件可以操作。
例如，下面的HTML中有两个输入框，一个启用，一个禁用：
通过 :enabled 可只为可编辑的输入框设置样式。
立即学习“前端免费学习笔记（深入）”；
使用:enabled改变边框颜色
为启用的输入框设置醒目的边框，能增强界面可读性。比如将可用输入框的边框设为蓝色：
input:enabled {
border: 2px solid #007BFF;
border-radius: 4px;
}
这样，只有可输入的框体才会显示蓝色边框，禁用的保持默认或通过 :disabled 单独设置灰色边框，形成视觉对比。
调整字体颜色和背景
除了边框，字体颜色也能帮助用户判断状态。启用状态可使用深色文字，提高可读性：
input:enabled {
color: #333;
background-color: #fff;
}
如果需要更明显的反馈，还可以配合:focus使用，进一步优化交互体验：
input:enabled:focus {
outline: none;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
适用于多种表单元素
:enabled 不仅限于文本输入框，还可应用于按钮、下拉框等：
- button:enabled { background: green; color: white; }
- select:enabled { cursor: pointer; }
- textarea:enabled { border-color: #28a745; }
统一启用状态的视觉风格，有助于构建一致的表单交互逻辑。
基本上就这些。合理使用 :enabled 能让表单更易用，样式更清晰。不复杂但容易忽略。
