在 CSS 的众多状态伪类中，:enabled 出现的频率并不高，原因在于大多数表单控件默认都处于可用状态。没有显式加 disabled 特性的 <input>、<select>、<textarea> 和 <button> 都会被 :enabled 选中。它和 :disabled 形成互补关系：一个元素在同一时刻只能匹配其中一种。理解这一点之后，就可以不再依赖 JavaScript 切换 class，仅靠 CSS 状态选择器完成可用与禁用的样式切换。
一、:enabled 的匹配范围与基础用法
从规范定义来看，:enabled 表示当前元素处于可交互状态，既没有被禁用，也没有因为祖先元素禁用而间接失效。它并不是所有 HTML 元素都能匹配。只有支持 disabled 特性的表单相关元素才真正参与状态切换，包括 <input>、<select>、<textarea>、<button>、<fieldset>、<optgroup> 和 <option>。像 <div> 或 <span> 这类普通容器即使写了 :enabled，也不会有任何匹配结果。
默认情况下，页面上没有设置 disabled 的输入框、按钮、下拉列表，都会命中 :enabled。这意味着如果你写出 input:enabled { background: #fff; }，几乎页面上所有文本框都会变成白色背景。真正需要处理的是同时给出 :enabled 与 :disabled 的差异化样式，否则默认样式覆盖范围过大，反而影响视觉层级。
下面这段代码演示了最基础的用法。它让可用输入框显示蓝色边框和浅色背景，而禁用输入框则自动变成灰色背景和虚线边框。
<form> <label>可用输入框</label> <input type="text" value="可以编辑"> <label>禁用输入框</label> <input type="text" value="不可编辑" disabled> <button type="submit">提交</button> <button type="button" disabled>不可点击</button> </form>
input:enabled,
button:enabled {
border: 1px solid #2f80ed;
background-color: #f0f7ff;
color: #1c3d5a;
}
input:disabled,
button:disabled {
border: 1px dashed #aaa;
background-color: #eee;
color: #999;
cursor: not-allowed;
}
从上面的效果可以看出，可用控件会得到更明确的边框和背景，而禁用控件则弱化处理。这种状态区分在很多后台表单中非常实用，用户可以一眼看出哪些字段还能操作。
二、与焦点、悬停等状态组合使用
只靠 :enabled 做基础区分还不够。真实表单中，可用状态往往需要进一步细分为悬停、聚焦、只读等子状态。例如，一个普通输入框平时可以是白色背景，鼠标悬停时变浅灰，获得焦点时显示明显的蓝色边框，而禁用状态下则保持灰色不变。如果把这些状态都交给 JavaScript 维护，代码会变得繁琐，而 CSS 伪类组合可以更清晰地表达这种层级关系。
要特别注意选择器的书写顺序。由于伪类的优先级相同，后面的规则会覆盖前面的规则。如果希望聚焦样式优先于悬停样式，通常把 :focus 放在 :hover 后面。比如 input:enabled:hover 只影响可用且悬停的输入框，不会干扰禁用控件；input:enabled:focus 则进一步限定为可用且获得焦点的输入框。这样即使某个输入框被鼠标划过，但只要没有聚焦，就不会错误地显示聚焦状态。
input:enabled {
background-color: #fff;
border: 1px solid #ccc;
transition: border-color .2s, background-color .2s;
}
input:enabled:hover {
background-color: #fafafa;
border-color: #999;
}
input:enabled:focus {
background-color: #fff;
border-color: #2f80ed;
outline: none;
box-shadow: 0 0 0 3px rgba(47, 128, 237, .15);
}
input:read-only {
background-color: #f5f5f5;
color: #666;
}
这段样式可以同时处理可用、悬停、聚焦和只读四种情况。禁用输入框不会获得悬停或聚焦效果，因为后面的规则没有匹配它。只读输入框虽然也算可用，但通过 :read-only 单独覆盖了背景和文字颜色，避免用户误以为可以编辑。
另一个容易被忽略的场景是 <fieldset>。当 <fieldset> 被设置为 disabled 时，它内部的所有表单控件都会继承禁用状态，无法再被 :enabled 命中。因此，如果你想批量禁用一组相关字段，直接给 fieldset 加 disabled 会比逐个控制更方便，样式上也能自动统一为禁用外观。
<fieldset disabled>
<legend>高级设置</legend>
<input type="text" placeholder="不会响应输入">
<select>
<option>选项一</option>
</select>
</fieldset>
fieldset:disabled input,
fieldset:disabled select {
background-color: #e9e9e9;
color: #888;
cursor: not-allowed;
}
三、常见误区与调试建议
第一种常见误区是以为 :enabled 可以匹配任何可见元素。实际上它只针对原生表单控件，给 <div>、<li>、<span> 添加 :enabled 不会产生任何效果。如果需要在非表单元素上表达可用与不可用，只能借助 class 或 data 属性自行维护状态。
第二种误区是选择器冗余。有些人会写 input:enabled:not(:disabled)，这没有必要，因为 :enabled 本身就排除了禁用状态。真正需要注意的是 :enabled 与 :not(:disabled) 的细微差异。虽然大多数表单控件上两者等价，但某些自定义元素或未来扩展可能对 disabled 状态的定义不同。在标准 HTML 表单场景下，直接使用 :enabled 更直观。
调试时，可以借助浏览器开发者工具的元素面板强制切换状态。Chrome 和 Edge 的 Elements 面板中，右键点击元素后可以在 Force state 里勾选 :disabled、:hover、:focus 等状态，然后观察右侧 Styles 面板中哪些规则生效。如果发现可用输入框的聚焦样式没有出现，先确认选择器是否写成了 input:focus:enabled，虽然它与 input:enabled:focus 匹配结果相同，但书写顺序可能影响阅读和覆盖逻辑。
还有一个性能相关的问题：虽然 :enabled 作为伪类选择器本身性能开销很小，但如果把它放进非常长的后代选择器，例如 .wrapper .content .form-area .row input:enabled，浏览器仍然需要遍历较多层级。现代浏览器对这类选择器优化已经很好，但在超大表单或高频重绘场景下，尽量保持选择器简洁，避免无意义的层级嵌套。
总体而言，:enabled 是一个轻量但非常有用的状态选择器。它让可用样式的管理回归 CSS 本身，减少对额外 class 的依赖，也让表单在动态启用和禁用时保持视觉一致。只要理解它只匹配原生可禁用控件、与 :disabled 互补，并能合理组合悬停和聚焦状态，就能用很小的代价构建出清晰的表单交互反馈。
CSS :enabled表单样式伪类选择器修改时间：2026-09-19 11:51:32