:enabled

CSS 伪类 :enabled 表示任何被启用的(enabled)元素。如果一个元素能够被激活(如选择、点击或接受文本输入),或者能够获取焦点,则该元素是启用的。元素也有一个禁用的状态(disabled state),在被禁用时,元素不能被激活或获取焦点。

/* 选择任何启用状态的 <input> */
input:enabled {
  color: blue;
}

语法

:enabled

示例

下面的代码,当文本输入框处于启用状态时,输入框 <input> 的文本是绿色的,处于禁用状态时,输入框的文本则是灰色的。这样可以把元素是否可用反馈给用户。

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: #2b2;
}

input:disabled {
  color: #aaa;
}

结果

规范

规范 状态 备注
HTML Living Standard
:enabled
Living Standard No change.
HTML5
:enabled
Recommendation Defines the semantics for HTML and forms.
Selectors Level 4
:enabled
Working Draft No change.
Selectors Level 3
:enabled
Recommendation Defines the pseudo-class, but not the associated semantics.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:enabledChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 9Safari Full support 3.1WebView Android Full support 2Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

参见