Custom HTML Checkboxes, Radio Buttons and Select Lists

Working Example with Submission

(styled)

(styled)

(unstyled)

(unstyled)

(styled)

(styled)

(unstyled)

(unstyled)

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" />

Disabled Unchecked

Disabled Checked

Not Checked and Checked by Default

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

Unchecked

Checked

Checked Radio Button in Group

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

Unchecked

Checked

No Radio Button Checked By Default

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

Unchecked

Unhecked

  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>

Copyright © 2007-2008 Ryan Fait

来源：ryanfait　代码整理：脚本之家　感谢：letian

转载请注明出处，此代码仅供学习交流，请勿用于商业用途。