English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:disabled CSS pseudo-class represents any disabled element. If an element cannot be activated (such as selection, click, or text input acceptance) or gain focus, it is in a disabled state. The element also has an enabled state (enabled state), in which the element can be activated or gain focus.
Complete CSS Selector Reference Manual
Set the background color of all disabled input elements with type="text":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>
input[type="text"]:enabled
{
background:yellow;
}
input[type="text"]:disabled
{
background:#dddddd;
}
</style>
</head>
<body>
<form action="">
Name: <input type="text" value="Mouse"> /><br>
Region: <input type="text" disabled="disabled" value="Disneyland"> /><br>
</form>
</body>
</html>Test and see ‹/›:disabled selector matches each disabled element (mainly used for form elements).
The numbers in the table indicate the first browser version that supports the attribute.
| Selector | |||||
|---|---|---|---|---|---|
| :disabled | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Set the background color for all disabled input elements:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>
input:enabled
{
background:yellow;
}
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 ‹/›