CSS伪类：disabled与enabled使用解析

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《CSS伪类：disabled与enabled表单控制详解》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

:disabled 和 :enabled 伪类用于根据表单元素状态设置样式，提升可读性与交互体验。1. :disabled 匹配禁用元素，常用于灰化输入框、按钮等，示例为设置背景色#f2f2f2、文字色#999、不可用光标；2. :enabled 匹配可交互元素，可用于突出可操作控件，如按钮启用时显示蓝色背景并支持悬停变深；3. 实际场景中，注册表单提交按钮初始禁用，未勾选条款时不可点击，通过 JavaScript 移除 disabled 后 :enabled 样式生效，实现视觉反馈自动化，无需额外 class，兼容性好且减少误操作。

在表单开发中，CSS 伪类 :disabled 和 :enabled 可以帮助我们根据表单元素的启用状态来设置不同的样式，提升用户体验和界面可读性。

:disabled 伪类

这个伪类匹配所有被禁用的表单元素。当一个输入框、按钮或下拉菜单设置了 disabled 属性时，浏览器会自动应用 :disabled 的样式规则。

• 常用于灰化不可操作的控件，让用户直观识别哪些元素不能交互
• 适用于 input、textarea、select、button 等表单组件
• 例如：将禁用的输入框背景设为浅灰色，文字颜色变淡

input:disabled {
  background-color: #f2f2f2;
  color: #999;
  border: 1px solid #ccc;
  cursor: not-allowed;
}

:enabled 伪类

与 :disabled 相反，:enabled 匹配所有处于可交互状态的表单元素。虽然大多数元素默认是启用的，但显式使用该伪类有助于统一视觉反馈。

• 可用于强调当前可编辑或可点击的控件
• 配合 JavaScript 动态切换状态时特别有用
• 比如给可点击按钮添加悬停效果，而禁用按钮不响应 hover

button:enabled {
  background-color: #007bff;
  color: white;
  cursor: pointer;
}
button:enabled:hover {
  background-color: #0056b3;
}

实际应用场景

在注册表单中，提交按钮初始为 disabled（如用户未勾选同意条款），此时用 :disabled 让按钮看起来不可点。一旦用户完成必要操作，JavaScript 移除 disabled 属性，:enabled 样式生效，按钮恢复可点击外观。

• 提高界面可用性，减少误操作
• 无需额外 class 控制，样式与状态自动绑定
• 支持现代浏览器，兼容性良好

好了，本文到此结束，带大家了解了《CSS伪类：disabled与enabled使用解析》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！