##description##
:enabled
Sara Cope
on
Updated on
Ad
The :enabled pseudo-class in CSS selects focusable elements that are not disabled, and therefore enabled. It is only associated with form elements (<input>, <select>, <textarea>). Enabled elements include ones in that you can select, that you can enter data into, or that you can focus on or click.
So when a checkbox is checked, and you are targeting the label immediately after it:
input:enabled + label {
color: #333;
font-style: italic;
}The label text will dark grey and italic if the checkbox is enabled, meaning the user can toggle it on and off.
In theory, :enabled should match an <a>, <area>, or <link> with href attributes, but browsers don’t seem to handle that scenario. You can style <button>, <input>, <textarea>, <optgroup>, <option> and <fieldset>s that are not disabled. When <menu> is supported, we should also be able to target <command> and <li>‘s that are children of <menu>, if not disabled.
You would also think that elements with contenteditable and tabindex attributes would be selectable with the :enabled pseudo-class. The spec does not state this, nor do browsers support it.
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| All | 3.1 | All | 9 | 9 | All | All |
For a site that teaches about CSS and html you have the slowest site that I have come across in a long time.
It is slow to scroll and even slow to enter characters into this comment block.
I and I am sure others will avoid your site as a result
Cheers
Feels pretty fast to me.
When you say “It is only associated with form elements (, , )”, do you mean all form elements? Or just the three listed?
It seems like it can be all form elements? e.g. button:enabled.
It is associated with any UI element in an enabled state. In most (maybe all?) cases, that will be form controls, and buttons fall within that category.