表单元素禁用样式：:disabled与:enabled区别

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《:disabled和:enabled伪类用于控制表单元素的样式，主要区别在于：:disabled 用于选择被禁用的表单元素（如 <input disabled>）。这些元素通常无法被用户交互，样式上可能显示为灰色或不可点击。:enabled 用于选择未被禁用的表单元素（如 <input> 或 <textarea> 没有 disabled 属性）。这些元素可以被用户操作。示例：input:disabled { background-color: #ccc; color: #888; } input:enabled { background-color: #fff; color: #000; }实际应用：可以通过这两个伪类为不同状态的表单元素设置不同的样式。常用于提升用户体验，明确显示哪些字段可编辑、哪些不可编辑。注意事项：这两个伪类仅适用于表单控件（如 <input>, <select>, 等）。不适用于普通 HTML 元素（如

或 ）。通过合理使用 :disabled 和 :enabled，可以更直观地引导用户操作，增强界面的可用性。》，聊聊，我们一起来看看吧！

:disabled和:enabled是CSS中用于表单元素的伪类，分别选中禁用和启用状态的控件。:enabled匹配可交互元素，如未设置disabled属性的input、button等；:disabled则选中已禁用的表单元素，常用于灰化不可操作控件。两者互为反义，通过设置不同样式提升表单视觉反馈，仅对支持disabled属性的表单元素有效，普通标签如div、span不受影响。

在CSS中，:disabled 和 :enabled 是用于表单元素的伪类选择器，用来根据元素是否可交互来应用不同的样式。

:enabled 伪类

表示一个可以被用户操作的表单元素。默认情况下，大多数表单控件如输入框、按钮等都是启用状态。

• 适用于可以被点击、聚焦或输入内容的元素
• 常见于没有设置 disabled 属性的 input、button、select 等
• 例如：一个普通的文本输入框会匹配 :enabled

:disabled 伪类

选中当前处于禁用状态的表单元素。禁用的元素通常无法被点击、聚焦或提交。

• 元素设置了 disabled 属性后就会匹配此伪类
• 常用于灰化不可用控件，提示用户当前不能操作
• 例如：<input type="text" disabled> 就会被 :disabled 选中

实际使用示例

通过这两个伪类可以轻松控制启用和禁用状态下的外观：

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

input:disabled {
  background-color: #f5f5f5;
  color: #999;
  border: 1px dashed #ddd;
}

基本上就这些。它们互为反义，配合使用能提升表单的视觉反馈效果，让用户更清楚哪些控件当前可用。注意只对支持 disabled 属性的元素有效，比如表单相关标签。普通 div 或 span 不受这两个伪类影响。

好了，本文到此结束，带大家了解了《表单元素禁用样式：:disabled与:enabled区别》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！

</select></textarea>