:enabled

版本：CSS3

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

语法:

E:enabled{sRules}

匹配用户界面上处于可用状态的元素E。

浏览器支持


IE9+以及新版浏览器都支持`: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="submit" value="submit" />
</form>

//CSS


input:enabled {color: #22aa22;}
input:disabled {color: #d9d9d9;}

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input[type="text"]:enabled{
background-color:pink;
}
</style>
</head>
<body>


<p>给选中的输入元素设置背景色</p>
用户名:<input type="text"><br>
密码:<input type="password"><br>
</body>
</html>

给选中的输入元素设置背景色

用户名:
密码: