CSS3 guide: 3.11. UI element states pseudo classes

This is a post in a series, please see the Table of Contents [webmasterworld.com] for the other posts in the series.

3.11. UI element states pseudo classes

The UI (User Interface) element state pseudo classes [w3.org] disabled, enabled, checked and indeterminate apply to elements that can have such state through means outside of CSS. Either the user of scripting can set the state, of the state could be derived from the html intself.

Syntax: E:disabled

selects those elements which have a disabled state.

Syntax: E:enabled

selects those elements which have an enabled state.

Syntax: E:checked

selects those elements which have a checked state (note the user can change the state).

Syntax: E:indeterminate

selects those elements which have an indeterminate state (note one needs scripting to enter the state).

Example:


<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <style type="text/css">
      button.style {
        background-color: orange;
      }
      button.style:disabled {
        background-color: red;
        color: white;
      }
      button.style:enabled {
        background-color: green;
        color: yellow;
      }
      span {
        background-color: orange;
      }
      input:checked + span {
        background-color: blue;
        color: white;
      }
      input:indeterminate + span {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <form action="#">
      <p>default:</p>
      <button disabled="disabled">disabled</button>
      <button>enabled</button>
      <p>styled:</p>
      <button class="style" disabled="disabled">disabled</button>
      <button class="style">enabled</button>
      <input type="checkbox" checked="checked" /><span>checked by default</span>
      <input type="checkbox" /><span>not checked by default</span>
      <input type="checkbox" id="here" /><span>made indeterminate by scripting</span>
    </form>
    <script type="text/javascript">
      window.onload = function() {
        document.getElementById("here").indeterminate = true;
      }
    </script>
  </body>
</html>

Note this example is in HTML5.

Support:

:checked :disabled :enabled

Supported in most standard compliant browsers
Not supported by IE (including IE8)

:indeterminate

Supported in webkit based browsers (safari & chrome)
Not supported in Firefox (including 3.5), probably for next version
Not supported by IE (including IE8)

Graceful fallback:
As always this is hard to do with selectors.

IE8.js adds support for all four selectors in IE6 and IE7

jQuery?: To be elaborated.

Practical use:

Enhance your forms!

[edited by: swa66 at 10:44 pm (utc) on July 6, 2009]

CSS3 guide: 3.11. UI element states pseudo classes

swa66

swa66

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week