CSS伪类:enabled如何控制可用输入框样式_使用:enabled调整边框和字体颜色

:enabled伪类用于选择可交互的表单元素，匹配未添加disabled属性的输入框、按钮等，通过设置边框、颜色、背景等样式区分可操作与不可操作状态，提升表单可用性与视觉一致性。

在网页表单中，输入框可能会因为状态不同而启用或禁用。使用CSS的:enabled伪类，可以专门针对可交互的输入框设置样式，提升用户体验。这个伪类匹配所有处于“可用”状态的表单元素，比如 、 和 <button>，让开发者能直观地区分可操作与不可操作的控件。</button>

什么是:enabled伪类？

:enabled 是CSS中用于选择处于启用状态的表单元素的伪类。只要元素没有添加 disabled 属性，就会被该伪类选中。常用于动态调整输入框外观，帮助用户快速识别哪些控件可以操作。

例如，下面的HTML中有两个输入框，一个启用，一个禁用：

<input type="text" value="我可以编辑" />
<input type="text" value="我已禁用" disabled />

通过 :enabled 可只为可编辑的输入框设置样式。

立即学习“前端免费学习笔记（深入）”；

使用:enabled改变边框颜色

为启用的输入框设置醒目的边框，能增强界面可读性。比如将可用输入框的边框设为蓝色：

input:enabled {
  border: 2px solid #007BFF;
  border-radius: 4px;
}

这样，只有可输入的框体才会显示蓝色边框，禁用的保持默认或通过 :disabled 单独设置灰色边框，形成视觉对比。

美间AI

美间AI：让设计更简单

261

查看详情

调整字体颜色和背景

除了边框，字体颜色也能帮助用户判断状态。启用状态可使用深色文字，提高可读性：

input:enabled {
  color: #333;
  background-color: #fff;
}

如果需要更明显的反馈，还可以配合:focus使用，进一步优化交互体验：

input:enabled:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

适用于多种表单元素

:enabled 不仅限于文本输入框，还可应用于按钮、下拉框等：

• button:enabled { background: green; color: white; }
• select:enabled { cursor: pointer; }
• textarea:enabled { border-color: #28a745; }

统一启用状态的视觉风格，有助于构建一致的表单交互逻辑。

基本上就这些。合理使用 :enabled 能让表单更易用，样式更清晰。不复杂但容易忽略。

以上就是CSS伪类:enabled如何控制可用输入框样式_使用:enabled调整边框和字体颜色的详细内容，更多请关注php中文网其它相关文章！