JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<form class="form" method="post">    
            <fieldset>
                <legend>Which genres do you like?</legend>
                <input type="checkbox" value="action" id="check-1" name="genre"><label for="check-1" class="">Action / Adventure</label>
                <input type="checkbox" value="comedy" id="check-2" name="genre"><label for="check-2" class="">Comedy</label>
                <input type="checkbox" value="epic" id="check-3" name="genre"><label for="check-3" class="">Epic / Historical</label>
                <input type="checkbox" value="science" id="check-4" name="genre"><label for="check-4" class="">Science Fiction</label>
                <input type="checkbox" value="romance" id="check-5" name="genre"><label for="check-5" class="">Romance</label>
                <input type="checkbox" value="western" id="check-6" name="genre"><label for="check-6" class="">Western</label>
            </fieldset>        
            <fieldset>
                <legend>Caddyshack is the greatest movie of all time, right?</legend>
                <input type="radio" value="1" id="radio-1" name="opinions"><label for="radio-1" class="">Totally</label>
                <input type="radio" value="1" id="radio-2" name="opinions"><label for="radio-2" class="">You must be kidding</label>
                <input type="radio" value="1" id="radio-3" name="opinions"><label for="radio-3" class="">What's Caddyshack?</label>
            </fieldset>
        </form>

<script type="text/javascript">
        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';
                   ...

CSS

/* CSS for customized radio buttons and check boxes */
            /* page styles */
            body {
                font-size: 62.5%;
            }
            fieldset {
                padding: 0 15px 3em;
                border: 0;
            }
            legend {
                font-size: 1.4em;
                font-weight: bold;
                padding: .2em 5px;
            }
            /* wrapper divs */
            .custom-checkbox, 
            .custom-radio { 
                position: relative; 
            }
            /* input, label positioning */
            .custom-checkbox input,
            .custom-radio input {
                position: absolute;
                left: 2px;
                top: 3px;
                margin: 0;
                z-index: 0;
            }
            .custom-checkbox label,
            .custom-radio label {
                display: block;
                position: relative;
                z-index: 1;
                font-size: 1.3em;
                padding-right: 1em;
                line-height: 1;
                padding: .5em 0 .5em 30px;
                margin: 0 0 .3em;
                cursor: pointer;
            }
            /* states */
            .custom-checkbox label { 
                background: url(http://www.w3cplus.com/sites/default/files/checkbox.gif) no-repeat; 
            }
            .custom-radio label { 
                background: url(http://www.w3cplus.com/sites/default/files/radiobutton.gif) no-repeat; 
            }
            .custom-checkbox label, 
            .custom-radio label {
                background-position: -10px -14px;
            }
            .custom-checkbox label.hover,
            .custom-checkbox label.focus,
            .custom-radio label.hover,
            .custom-radio label.focus {
                background-position: -10px -114px;
            }
            .custom-checkbox label.checked,
            .custom-radio label.checked {
               ...