JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<script src="http://webdesignrecipes.com/MdN-jQuery/ui/ui.elements.js"></script>

<!-- container -->
<div id="container" class="clearfix">




<!-- main -->


<!-- sidebar -->
<div id="sidebar">
<form method="get" id="contact-form" action="#">










<fieldset class="section" id="mag">
<legend class="label">メルマガ : </legend>
<div class="right">
<p>当店のメルマガを無料購読されますか？</p>
<label for="yes"><input type="radio" name="malemagezine[]" id="yes" value="yes" checked="checked" />購読する</label>
<label for="no"><input type="radio" name="malemagezine[]" id="no" value="no" />購読しない</label>
</div>
</fieldset>

<div class="section">
<input type="submit" value="送信" class="button" id="submit-button" />
</div>

</form>
</div><!-- /sidebar -->

</div><!-- /container -->

CSS

/****************************************

          sample.site stye.css

*****************************************/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, figure {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: normal;
    font-style: normal;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}





#main .section img{
    vertical-align: baseline;
}


div.right{
    margin-left: 135px;
}

#mag .label {
    width: 85px;
    float: left;
    font-weight: bold;
    text-shadow: 0 1px #fff;
    margin-left: 50px;
}


#mag .UIElm-radio-label{
        position: relative;
        padding-left: 30px;
        display: inline-block;
        cursor: pointer;
        margin-bottom: .5em;
        width: 100px;
    }

#mag .radio{
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url(http://webdesignrecipes.com/MdN-jQuery/ui/images/radio.png) no-repeat 0 0;
    margin-right: 5px;
    position: absolute;
    top:0;
    left: 0;
}

    #mag .radio.checked{
        background-position: 0 100%;
}

#sex .label {
    width: 85px;
    float: left;
    font-weight: bold;
    text-shadow: 0 1px #fff;
    margin-left: 50px;
}

#sex .UIElm-radio-label{
        position: relative;
        padding-left: 30px;
        display: inline-block;
        cursor: pointer;
        margin-bottom: .5em;
        width: 100px;
    }

#sex .radio{
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url(http://kachibito.net/wp-content/uploads/2012/04/radio.png) no-repeat 0 0;
    margin-right: 5px;
    position: absolute;
    top:0;
    left: 0;
}

    #sex .radio.checked{
        background-position: 0 100%;
    }

JavaScript

$(function() {

    /* ui-elements */
    $('#sex').UIElements({
        radio: [
            { name: 'sex[]'}
        ]
    });
        /* ui-elements */
    $('#mag').UIElements({

        radio: [
            { name: 'malemagezine[]' }
        ]
    });
});