如何通过css:enabled控制可用表单样式

:enabled伪类用于选中启用状态的表单元素。默认多数控件如input、button、select均为启用，可通过添加disabled属性变为禁用。使用:enabled可为可用控件设置背景色、边框、文字颜色等样式，提升可操作性识别。示例中input:enabled设白底灰边黑字，button:enabled设绿色背景白字并显示手型光标。常配合:disabled实现视觉对比，如禁用时降低透明度、变灰背景、显示禁止光标。支持元素包括input、textarea、select、option、button等未设disabled的控件。合理使用:enabled能直观区分状态，无需JavaScript即可分离样式，提升用户体验。

在表单设计中，区分可用和不可用的控件能提升用户体验。CSS 提供了 :enabled 伪类选择器，用来选中页面中处于“可用”状态的表单元素，从而为其设置特定样式。

什么是 :enabled 伪类？

:enabled 匹配所有启用状态的表单元素。默认情况下，大多数表单控件如 input、button、select 都是启用的，除非添加了 disabled 属性。

与之对应的是 :disabled 伪类，用于设置被禁用元素的样式。

如何使用 :enabled 设置可用控件样式

你可以为可用的输入框、按钮等设置背景色、边框、文字颜色等，让用户清晰识别哪些可以操作。

立即学习“前端免费学习笔记（深入）”；

示例：

input:enabled {
  background-color: #fff;
  border: 1px solid #ccc;
  color: #333;
}

button:enabled {
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

结合 :disabled 实现对比效果

通常我们会同时使用 :enabled 和 :disabled 来形成视觉对比。

例如：

input:enabled {
  opacity: 1;
  transform: scale(1);
}

input:disabled {
  opacity: 0.6;
  background-color: #f2f2f2;
  cursor: not-allowed;
}

这样用户一眼就能看出哪些输入框当前可编辑。

支持的表单元素

:enabled 可用于以下常见表单控件：

• input
• textarea
• select
• option
• button

只要这些元素没有设置 disabled 属性，就会被 :enabled 选中。

基本上就这些。合理使用 :enabled 能让表单更直观，不需要 JavaScript 就能实现状态样式的分离。不复杂但容易忽略。