Simple HTML Radio

Simple HTML Radio is a jQuery plugin that helps in styling native radio buttons. It does this by hiding away the native radio button replacing it with a span element which can be styled easily. The script gracefully degrades, so if JavaScript is disabled, native radio buttons appear instead of your styled radio buttons. Its also "tabbable" and supports keyboard navigation.

Demo

Native Radio Buttons

Appearance depends on your OS.

Example 1: Simple HTML Radio

Example 2: Tab Support

Place focus on textbox and hit Tab key.

Example 3: Keyboard Navigation

Put focus on one of the radio buttons and use Left, Right, Up and Down to navigate.

Installation

Download the zip, extract and include the needed files in your project.
Include the plugin styles:

<link rel="stylesheet" href="simple-html-radio/simple-html-radio.css" />

Include jQuery:

<script src="js/jquery-1.11.1.min.js" ></script>

Include the Simple HTML Radio script:

<script src="simple-html-radio/simple-html-radio.min.js" ></script>

Initialize the plugin on a radio button:

<script type="text/javascript">
$(document).ready(function(){
    $('.replace-radio').simpleHtmlRadio();
});
</script>

Check the included html file for a complete example.

Modifications

Radio styles are found in simple-html-radio/simple-html-radio.css. To modify the class names, pass it during initialization:

<script type="text/javascript">
$(document).ready(function(){
    $('.replace-radio').simpleHtmlRadio({
        classNames:{
            main: 'simple-html-radio',
            inside: 'simple-html-radio-inside',
            checked: 'simple-html-radio-checked',
            disabled: 'simple-html-radio-disabled',
            hidden: 'simple-html-radio-hidden'
        }
    });
});
</script>

Bug Reports

Issues can be filed on the project tracker.

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

css.php