Custom HTML Checkboxes, Radio Buttons and Select Lists

Working Example with Submission

Select lists appear unstyled in IE6 and some versions of Opera.

Disabled Checkbox and Radio Button

  1. <input type="checkbox" class="styled" disabled="disabled" />
  2. <input type="radio" class="styled" checked="checked" disabled="disabled" />

Not Checked and Checked by Default

  1. <input type="checkbox" class="styled" />
  2. <input type="checkbox" class="styled" checked="checked" />

Checked Radio Button in Group

  1. <input type="radio" class="styled" />
  2. <input type="radio" class="styled" checked="checked" />

No Radio Button Checked By Default

  1. <input type="radio" class="styled" />
  2. <input type="radio" class="styled" />

  1. <select class="styled" />
  2.     <option>Who</option>
  3.     <option selected="selected">What</option>
  4.     <option>When</option>
  5.     <option>Where</option>
  6.     <option>How</option>
  7. </select>

  1. <select class="styled" />
  2.     <option>This</option>
  3.     <option>That</option>
  4.     <option>These</option>
  5.     <option>Those</option>
  6.     <option>Theirs</option>
  7. </select>