JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<script src="http://www.filamentgroup.com/examples/customInput/customInput.jquery.js"></script>
<fieldset id="radioset">
    <input type="radio" id="radio-1" name="amount" value="Option 1" /><label for="radio-1" title="">Option 1</label><br />
    <input type="radio" id="radio-2" name="amount" value="Option 2" /><label for="radio-2" title="">Option 2</label><br />
    <input type="radio" id="radio-3" name="amount" value="Option 3" /><label for="radio-3" title="">Option 3</label><br />
    <input type="radio" id="radio-4" name="amount" value="Option 4" /><label for="radio-4" title="">Option 4</label><br />
    <input type="radio" id="radio-5" name="amount" value="Option 5" /><label for="radio-5" title="">Option 5</label>
</fieldset>

CSS

input { margin: 8px; }


/* CSS below is only used for 'custom graphics' radio button plugin */

/* CSS for customized radio buttons and check boxes */

/* page styles */

fieldset { 
    margin: 0;
    padding: 0;
    border: 0;
}

/*    wrapper divs */

.custom-radio {  /* this wrapper contains each input image & label */
    position: relative; 
    height: 26px; 
    margin-right: 30px;
    margin-top: 0;
}

/* input, label positioning */

.custom-radio input { /* this is just the original input */
    position: absolute;
    left: 3px;
    top: 3px;
    margin: 0;
    z-index: 0;
}

.custom-radio label { /* this contains the image & label */
    display: block; 
    position: relative; 
    z-index: 1;  
    height: 26px; 
    padding: 4px 0 0 32px; 
    margin-right: 8px;
    margin-left: 0;
    cursor: pointer;
    font-size: 16px;
}

/* image states */

.custom-radio label { 
    background: url('http://img818.imageshack.us/img818/8351/radiobuttonm.gif') no-repeat; 
}

.custom-radio label {
    background-position: -12px -12px;
    color: #b1b5b8;
}

.custom-radio label.hover,
.custom-radio label.focus {
    background-position: -12px -112px;
    color: #818588;
}

.custom-radio label.checked {
    background-position: -12px -212px;
    color: #444444;
}

.custom-radio label.focus {
}

JavaScript

$(document).ready(function() {

    $('input').customInput(); // <-- activate this line to see why clicking on label is important

});


/*-------------------------------------------------------------------- 
 * jQuery plugin: customInput()
 * by Maggie Wachs and Scott Jehl, http://www.filamentgroup.com
 * Copyright (c) 2009 Filament Group
 * Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
 * Article: http://www.filamentgroup.com/lab/accessible_custom_designed_checkbox_radio_button_inputs_styled_css_jquery/  
 * Usage example below (see comment "Run the script...").
--------------------------------------------------------------------*/

jQuery.fn.customInput = function() {
    $(this).each(function(i) {
        if ($(this).is('[type=checkbox],[type=radio]')) {
            var input = $(this);

            // get the associated label using the input's id
            var label = $('label[for=' + input.attr('id') + ']');

            //get type, for classname suffix 
            var inputType = (input.is('[type=checkbox]')) ? 'checkbox' : 'radio';

            // wrap the input + label in a div 
            $('<div class="custom-' + inputType + '"></div>').insertBefore(input).append(input, label);

            // find all inputs in this set using the shared name attribute
            var allInputs = $('input[name=' + input.attr('name') + ']');

            // necessary for browsers that don't support the :hover pseudo class on labels
            label
                .hover(function() {
                    $(this).addClass('hover');
                    if (inputType == 'checkbox' && input.is(':checked')) {
                        $(this).addClass('checkedHover');
                    }
                }, function() {
                    $(this).removeClass('hover checkedHover');
                })
                .bind('mouseup', function(){
                    if...