如何通过css:enabled控制可用表单样式-css教程-PHP中文网

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

P粉602998670

发布： 2025-09-19 10:14:01

原创

1164人浏览过

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

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

在表单设计中，区分可用和不可用的控件能提升用户体验。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;
}