: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 匹配所有处于可交互状态的表单元素。虽然大多数元素默认是启用的，但显式使用该伪类有助于统一视觉反馈。
Ai Mailer
使用Ai Mailer轻松制作电子邮件
49 查看详情 
可用于强调当前可编辑或可点击的控件 配合 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表单控制的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1067435.html
微信扫一扫 
支付宝扫一扫 
