jQuery FancyOpts Plugin Demo

Custom Radio Buttons and Checkboxes

The demos presented below use these sample button images:

Disable JavaScript in your browser and reload to see the inputs degrade gracefully.

Software Preference: On-Mouse-Down Active

Windows 7

Mac OS X

Linux

$("#demo-1 input[type='radio']").fancyopts({
  width : 14,
  height : 14,
  image : 'radio.png'
});

Music Preference: On-Hover Active

Hipster Stuff

Death Metal

Classical

$("#demo-2 input[type='radio']").fancyopts({
  activeHover : true,
  width : 17,
  height : 12,
  image : 'radio-eye.png'
});

Ticket Class: No Active State, One Button Disabled

First Class

Business Class

Coach Class

$("#demo-3 input[type='radio']").fancyopts({
  hasActive : false,
  width : 15,
  height : 15,
  image : 'radio-min.png'
});

Game Joy Checkboxes with default active state (on-mouse-down)

Team Fortress 2

Street Fighter IV

$("#demo-4 input[type='checkbox']").fancyopts({
  width : 12,
  height : 12,
  image : 'checkbox.png'
});

Film Joy Checkboxes with no active state

The Matrix

Inception

$("#demo-5 input[type='checkbox']").fancyopts({
  hasActive : false,
  width : 12,
  height : 12,
  image : 'checkbox-min.png'
});