:enabled

该:enabledCSS伪类表示任何可启用的元素。如果元素可以被激活（例如选择，点击或接受文本输入）或接受焦点，则该元素被认为是enabled。元素也有一个不能被激活或接受焦点的禁用状态。

/* Selects any  enabled element */
input:enabled {
  color: #22AA22;
}

语法

:enabled

实例

以下将使文本颜色在启用时为中绿色，禁用时为灰色。这允许向用户反馈哪些元素是可交互的。

下面的HTML...

<form action="url_of_form">
  <label for="FirstField">First field (enabled):</label> <input type="text" id="FirstField" value="Lorem"><br />
  <label for="SecondField">Second field (disabled):</label> <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br />
  <input type="button" value="Submit" />
</form>

...和这个CSS一起使用...

input:enabled {
  color: #22AA22;
}

input:disabled {
  color: #D9D9D9;
}

...结果为：

注意，按钮上的文本颜色也是绿色的，因为按钮也是处于启用状态的。

规范

Specification	Status	Comment
HTML Living StandardThe definition of ':enabled' in that specification.	Living Standard	No change.
HTML5The definition of ':enabled' in that specification.	Recommendation	Defines the semantic regarding HTML and forms.
Selectors Level 4The definition of ':enabled' in that specification.	Working Draft	No change.
CSS Basic User Interface Module Level 3The definition of ':enabled' in that specification.	Candidate Recommendation	Link to Selectors Level 3.
Selectors Level 3The definition of ':enabled' in that specification.	Recommendation	Defines the pseudo-class, but not the associated semantic.

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	(Yes)	1.0 (1.7 or earlier)	9.0	9.0	3.1

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	2.1	(Yes)	1.0 (1)	9.0	9.5	3.1