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 includes 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
pseudoclass. The spec does not state this, nor do browsers support it.
Browser Support
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
All | 3.1 | All | 9 | 9 | All | All |
Leave a Reply