Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
[CSS Selector] E:disabled

[CSS Selector] E:disabled

Using selector:disabled, you can apply styles to elements in a disabled state. This is commonly called a "UI state pseudo-class." It does not work in IE8 or earlier. A disabled state refers to an element that has the disabled attribute, which prevents user input in form fields such as buttons and textareas. Note that in XHTML, attribute values cannot be omitted, so you must write disabled="disabled".

Sample Code

index.html

<input type="button" value="This is a button." disabled> <!-- Specify the disabled attribute like this. -->
<input type="button" value="This is a button." disabled="disabled"> <!-- In XHTML, the attribute value cannot be omitted, so you must write disabled="disabled". -->

style.css

/* style disabled input elements */
input:disabled { color: white; background-color: gray;}

/* style a disabled button */
button:disabled { opacity: 0.5; cursor: not-allowed;}

/* style a disabled textarea */
textarea:disabled { background-color: #f5f5f5; border-color: #ddd;}

/* dim a label next to a disabled input */
input:disabled + label { color: #999;}

Browser Preview

input:disabled { color: white; background-color: gray;} /* Sets disabled input elements to white text on a gray background. */

<input type="button" value="This button is enabled.">
<input type="button" value="This button is disabled." disabled>
<input type="textarea" value="This textarea is enabled.">
<input type="textarea" value="This textarea is disabled." disabled>