English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS pseudo-class :enabled represents any enabled (enabled) element. If an element can be activated (such as selected, clicked, or accept text input) or gain focus, then the element is enabled. Elements also have a disabled state (disabled state), when disabled, elements cannot be activated or gain focus.
Complete CSS Selector Reference Manual
Set the text color of all enabled input boxes with type="text":
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>
input:enabled {
color: #22AA22;
}
input:disabled {
color: #D9D9D9;
}
</style>
</head>
<body>
<form action="url_of_form">
<label for="FirstField">第一个字段(enabled):</label> <input type="text" id="FirstField" value="Lorem"><br />
<label for="SecondField">第二个字段(disabled):</label> <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>Test and See ‹/›:enabled Selector matches each enabled element (mainly used for form elements).
The numbers in the table indicate the first browser version that supports this attribute.
| Selector | |||||
|---|---|---|---|---|---|
| :enabled | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Set the background color for all enabled input elements:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>
input:enabled
{
background:#ffff00;
}
input:disabled
{
background:#dddddd;
}
</style>
</head>
<body>
<form action="">
First name: <input type="text" value="Mickey" /><br>
Last name: <input type="text" value="Mouse" /><br>
Country: <input type="text" disabled="disabled" value="Disneyland" /><br>
Password: <input type="password" name="password" />
<input type="radio" value="male" name="gender" /> Male<br>
<input type="radio" value="female" name="gender" /> Female<br>
<input type="checkbox" value="Bike" /> I have a bike<br>
<input type="checkbox" value="Car" /> I have a car
</form>
</body>
</html>Test and See ‹/›