JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<script src="http://kachibito.net/wp-content/uploads/2011/11/ui.elements.js"></script>
    <form method="get" action="">
        <div class="set">
            <span class="label">checkbox</span>
            <span class="checkboxes elm-set">
                <label for="check1"><input type="checkbox" name="checkbox[]" id="check1" value="1">checkbox1</label>
                <label for="check2"><input type="checkbox" name="checkbox[]" id="check2" value="2" checked>checkbox2</label>
                <label for="check3"><input type="checkbox" name="checkbox[]" id="check3" value="3">checkbox3</label>
                <label for="check4"><input type="checkbox" name="checkbox[]" id="check4" value="4">checkbox4</label>
            </span>
        </div>
        <div class="set">
            <span class="label">radio</span>
            <span class="radios elm-set">
                <label for="radio1"><input type="radio" name="radio" id="radio1" value="1">radio1</label>
                <label for="radio2"><input type="radio" name="radio" id="radio2" value="2">radio2</label>
                <label for="radio3"><input type="radio" name="radio" id="radio3" value="3">radio3</label>
                <label for="radio4"><input type="radio" name="radio" id="radio4" value="4">radio4</label>
            </span>
        </div>
        <div class="set">
            <label for="select">select</label>
            <span class="select elm-set">
                <select id="select" name="select">
                    <option value="">Selet Here...</option>
                    <option value="hogehogehoge">hogehogehoge</option>
                    <option value="fugafugafuga">fugafugafuga</option>
                    <option value="piyopiyo">piyopiyo</option>
                </select>
            </span>
        </div>

        <p class="button">
            <input type="submit" value="Submit">
        </p>
    </form>

CSS

label.UIElm-check-label,
label.UIElm-radio-label {
    cursor: pointer;
}
    span.checkbox {
        margin-right: 3px;
        content: ' ';
        display: inline-block;
        width: 20px;
        height: 24px;
        position: relative;
        top: 3px;
        background: url(http://kachibito.net/wp-content/uploads/2011/11/check.png) no-repeat;
    }
    span.checkbox.checked {
        background-position: 0 -24px;
    }

    span.radio {
        margin-right: 3px;
        content: ' ';
        display: inline-block;
        width: 20px;
        height: 20px;
        position: relative;
        top: 5px;
        background: url(http://kachibito.net/wp-content/uploads/2011/11/radio.png) no-repeat;
    }
    span.radio.checked {
        background-position: 0 -20px;
    }

.UIElm-select-box {
    display: inline-block;
    /display: inline;
    position: relative;
    /zoom: 1;
}

    .UIElm-select {
        padding: 0 0 0 10px;
        display: inline-block;
        /display: inline;
        width: 200px;
        height: 45px;
        color: #6c7ab4;
        background: url(http://kachibito.net/wp-content/uploads/2011/11/select.png) no-repeat;
        /zoom: 1;
        text-decoration: none;
    }

        .UIElm-select span {
            margin-right: -1px;
            padding: 0 70px 0 0;
            display: block;
            height: 45px;
            background: url(http://kachibito.net/wp-content/uploads/2011/11/select.png) no-repeat 100% -45px;
            line-height: 45px;
            text-shadow: 1px 1px 1px #fff;
        }
        .UIElm-select:hover span,
        .UIElm-select-show .UIElm-select span {
            background-position: 100% -90px;
        }

    .UIElm-select-option {
        list-style: none;
        margin: 0;
        border: solid #aaa 1px;
        border-top: none;
        padding: 0;
        width: 208px;
        position: absolute;
        top: 45px;
        left: 0;
        background: #fcfcfc;
        font-size: 13px;
...

JavaScript

jQuery(function($) {
            $('form').UIElements({
                checkbox: [
                    { name: 'checkbox[]' }
                ],
                radio: [
                    { name: 'radio' }
                ],
                select: [
                    { name: 'select' }
                ]
            });
        });