Treehouse: Grow your CSS skills. Land your dream job.

:enabled

Last updated on:

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 Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```