Super Simple jQuery Radio Button Replacement Plugin - Radio Button

File Size: 8.63KB
Views Total: 1121
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Super Simple jQuery Radio Button Replacement Plugin - Radio Button

Radio Button is an extremely lightweight jQuery plugin to create a <span> element that represents the radio button. After you have the fake radio element you can easily modify it's appearance with CSS.

See also:

How to use it:

1. Create a group of radio buttons.

<input type="radio" id="male" name="sex" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="sex" value="female" checked>
<label for="female">Female</label>

2. Load the jQuery javascript library and radio_button.js script on your web page.

<script src=""></script>
<script src="scripts/radio_button.js"></script> 

3. Initialize the plugin.


4. Add the following CSS snippets in your CSS file and change it to your taste.

/* Fake form fields */
*+.fake-radio, .fake-radio+* {
margin-left: 4px
.fake-radio {
display: inline-block;
width: 17px;
height: 17px;
vertical-align: middle;
background: url('../images/fake_radio_17x17.png') no-repeat;
cursor: pointer;
text-indent: -99em
} {
background-position: 0 -17px;
cursor: default
.lt-ie8 .fake-radio {
display: block;
overflow: hidden;
float: left;
margin: 2px 0 0 0

Change log:

v1.2.0 (2014-01-11)

  • Changed the way event handlers are being attached.

This awesome jQuery plugin is developed by adam-l. For more Advanced Usages, please check the demo page or visit the official website.