: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 就能实现状态样式的分离。不复杂但容易忽略。
以上就是如何通过css javascript java 伪类选择器 JavaScript css select pointer 选择器 border 伪类 background transform input