:enabled

概述

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

示例

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

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="submit" value="Submit" />
    </form>
  

CSS:

    input:enabled {
      color: #22AA22;
    }
    input:disabled {
      color: #D9D9D9;
    }
  

产生的效果:

需要注意的时提交按钮的文本颜色也是绿色的,因为按钮也是启用的。

规范

Specification Status Comment
WHATWG HTML Living Standard
:enabled
Living Standard No change.
HTML5
:enabled
Recommendation Defines the semantic regarding HTML and forms.
Selectors Level 4
:enabled
Working Draft No change.
CSS Basic User Interface Module Level 3
:enabled
Working Draft Link to Selectors Level 3.
Selectors Level 3
:enabled
Recommendation Defines the pseudo-class, but not the associated semantic.

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 9.0 9.0 3.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 1.0 (1) 9.0 9.5 3.1

相关链接

文档标签和贡献者

标签: 
 此页面的贡献者: AlexChao
 最后编辑者: AlexChao,