简介

:enabled 选择器用于选择已启用且可交互的表单控件。它仅适用于 <input>、<select> 和 <textarea> 元素。

语法

:enabled {
  /* 样式规则 */
}

用法

:enabled 选择器可用于对已启用的表单控件应用样式，例如：

// www.javascriptcn.com code example
input:enabled {
  background-color: white;
}

select:enabled {
  color: black;
}

textarea:enabled {
  border: 1px solid #ccc;
}

禁用控件的样式

:enabled 选择器的相反选择器是 :disabled，它用于选择已禁用的表单控件。可以通过结合这两个选择器来对已禁用和已启用的控件应用不同的样式：

input:disabled {
  background-color: gray;
}

input:enabled {
  background-color: white;
}

示例

以下是一些使用 :enabled 选择器的示例：

• 禁用无效的输入字段：

input:invalid:enabled {
  border: 1px solid red;
}

• 突出显示已填写的文本区域：

textarea:enabled:not(:empty) {
  background-color: #f5f5f5;
}

• 更改已启用下拉列表的字体大小：

select:enabled {
  font-size: 1.2rem;
}

浏览器支持

:enabled 选择器在所有现代浏览器中都得到广泛支持，包括：

• Chrome
• Firefox
• Safari
• Edge
• Opera

结论

:enabled 选择器是一种强大的工具，可用于对已启用和可交互的表单控件应用样式。通过了解其语法和用法，您可以创建更直观、更用户友好的 Web 表单。