理解：:enabled 伪类在表单中的作用
关于 :enabled 的含义
在 CSS 中，:enabled 是一种伪类选择器，匹配处于可用状态的表单控件。核心点：只有未被 disabled 属性禁用的输入控件会被选中；包含 input、textarea、select、button 等元素。此特性对于实现无障碍关系和交互反馈尤为重要。
当页面加载时，默认状态通常是 enabled，除非显式给出 disabled 属性。设计原则：对可用控件应用的样式，应避免污染不可用控件的外观。
通过 :enabled 控制边框样式
边框颜色与样式的要点
要对可用输入框的边框进行统一控制，优先使用 border，以获得一致的边框宽度和圆角效果。与 :focus 的组合，可以在获取焦点时显示明确的视觉反馈。
说明：:enabled 仅作用于当前可用元素，因此和 :focus、:hover 等伪类组合时需要注意优先级、兼容性问题。
/* 示例：仅对可用输入进行边框样式 */
input:enabled {border: 2px solid #4CAF50;border-radius: 6px;padding: 8px 10px;
}
input:enabled:focus {border-color: #1e88e5;outline: none;box-shadow: 0 0 0 3px rgba(30,136,229,.2);
}
通过 :enabled 控制字体颜色
文本颜色与占位文本的处理
通过 color 属性，可以设定可用输入的文本颜色，确保在不同背景下具有良好对比度。placeholder 文字颜色，需要单独通过伪元素设置，以避免影响实际文本。
实践要点：仅对可用控件应用颜色，以免让禁用控件错失视觉提示；在可用控件获得焦点时，可以通过 :focus 调整颜色深浅，提升可读性。
/* 可用输入的文本颜色与占位文本颜色 */
input:enabled {color: #333;
}
input:enabled::placeholder {color: #999;opacity: 1; /* Firefox 需要显式设置 */
}
input:enabled:focus {color: #111;
}
组合示例：可用输入的统一风格
表单中的交互视觉效果
将边框与字体颜色在一个规则集中管理，可以实现一致的表单风格。含义清晰的边框颜色和文字颜色，有助于提升可用性和美观度。
额外的交互特效，如 聚焦时的阴影和过渡，可以增强用户体验，而不会影响禁用控件的表现。
/* 可用输入的统一样式（包含聚焦状态） */
input:enabled {border: 2px solid #4CAF50;color: #222;padding: 8px 12px;border-radius: 6px;transition: border-color .2s ease, color .2s ease;
}
input:enabled:focus {border-color: #1e88e5;box-shadow: 0 0 0 3px rgba(30,136,229,.15);color: #000;
}
兼容性与无障碍注意事项
跨浏览器的实现与可访问性
大多数现代浏览器对 :enabled 的支持很好，主要考虑点在于 :focus、:hover 与 placeholder 的兼容性差异。对于旧版浏览器，确保备用样式，以保持可用性。
在无障碍方面，确保对聚焦状态提供明显的对比，使用高对比度颜色和可视的焦点指示，帮助键盘导航用户。
/* 针对旧浏览器的渐进增强示例（保留可用状态的样式） */
input:enabled {border: 2px solid #4CAF50;outline: none;
}
input:enabled:focus {border-color: #1e88e5;outline: 3px solid rgba(30,136,229,.25);
}
