Now that IE7, Firefox 2 and Safari 3 all support CSS selectors, it’s time to put all that power to good use! In the past forms have been a pain to style as you had to assign classes to each form field, so you’d end up with something like this:

<form>
  <table summary="User form">
    <tr>
      <th scope="row"><label for="username">Username</label></th>
      <td><input type=”text” name=”username” id=”username” value=”" class=”textField” /></td>
    </tr>
    <tr>
      <th scope=”row”><label for=”password”>Password</label></th>
      <td><input type=”password” name=”password” id=”password” value=”" class=”textField” /></td>
    </tr>
    <tr>
      <th scope=”row”><label for=”remember”>Remember Login</label></th>
      <td><input type=”checkbox” name=”remember” id=”remember” value=”1″ class=”checkbox” /></td>
    </tr>
    <tr>
      <th scope=”row”>Status</label></th>
      <td>
        <input type=”radio” name=”status” id=”status_1″ value=”1″ class=”radioButton” />
        <label for=”status_1″>Happy</label>
        <input type=”radio” name=”status” id=”status_2″ value=”2″ class=”radioButton” />
        <label for=”status_2″>Sad</label>
        <input type=”radio” name=”status” id=”status_3″ value=”3″ class=”radioButton” />
        <label for=”status_3″>Angry</label>
      </td>
    </tr>
    <tr>
      <td colspan=”2″><input type=”submit” name=”submit_form” id=”submit_form” value=”Login” class=”submitButton” /></td>
   </tr>
  </table>
</form>

With the corresponding classes in your stylesheet.

input.textField {border:1px solid blue;}
input.checkbox {width:50px;}
input.radioButton {width:50px;}
input.submitButton {background-color:yellow;}

By using selectors you can get rid of the classes in the HTML and just have the following in your stylesheet:

input[type="text"], input[type="password"] {border:1px solid blue;}
input[type="checkbox"] {width:50px;}
input[type="radio"] {width:50px;}
input[type="submit"] {background-color:yellow;}

Much better, and it also separates the code (HTML) and presentation (CSS) layers.

To support older browsers, then a bit of jQuery magic can help you out:

$(function(){
  $('input[type="text"].addClass('oldbrowser-textField'));
  $('input[type="password"].addClass('oldbrowser-textField'));
  $('input[type="checkbox"].addClass('oldbrowser-checkBox'));
  $('input[type="radio"].addClass('oldbrowser-radioButton'));
  $('input[type="submit"].addClass('oldbrowser-submitButton'));
});

You’ll need to add the corresponding classes to your CSS, so you’ll end up with:

input[type="text"], input[type="password"], input.oldbrowser-textField {border:1px solid blue;}
input[type="checkbox"], input.oldbrowser-checkBox {width:50px;}
input[type="radio"], input.oldbrowser-radioButton {width:50px;}
input[type="submit"], input.oldbrowser-submitButton {background-color:yellow;}

Of course you can reduce the jQuery, by using the filter method, but I’ve kept things simple for clarity.