<!DOCTYPE html>
<html>
  <head>
    <style>
    /* when the element 
     has the cursor focus. */
    textarea:focus {
      background-color: yellow;
    }

    /* when the element is enabled
     and ready to use (the normal state). */
    input:enabled  {
      color: green;
    }

    /* when the element is disabled (has
     the disable attribute). */
    input:disabled  {
      color: gray;
    }

    /* when the checkbox is checked. */
    input:checked {
      width: 50px;
      height: 50px;
    }
    </style>
    <title>Pseudo-classes</title>
  </head>
  <body>
    <textarea>Try edit this textare</textarea>
    <br>
    <input type="text" value="normal input">
    <br>
    <input type="text" value="disabled input" disabled>
    <br>
    <input type="checkbox"> Try to check this.
  </body>
</html>