E:enabled / E:disabled

A user interface element E which is enabled or disabled (for instance a radio-button or checkbox) (Source: W3C)

HTML:

  1. <input type="text" id="theEnabled" value="Enabled" />
  2. <input type="text" id="theDisabled" disabled="disabled" value="Disabled" />

CSS:

  1. input{display:block;width:250px;height:20px;border:1px solid black;margin:5px 0}
  2. input:enabled{border-color:green}
  3. input:disabled{border-color:red}

Output:

Test of :checked

In the example, the first input field (enabled) should have a green border and the second (disabled) should have a red border.