JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<form action="">
    <input type="text" class="searchtaskfield" placeholder="Input field" value="" />
    <select name="voorbeeldSelect">
        <option value="1">Dropdown Menu axdasdas</option>
        <option value="2">Dropdown Menu 2</option>
        <option value="3">Dropdown Menu 3</option>
        <option value="4">Dropdown Menu 4</option>
        <option value="5" selected="selected">Dropdown Menu 5</option>
    </select>
    <br/><br/>
    <select name="voorbeeldSelect">
        <option value="1">Dro</option>
        <option value="2">Dro</option>
        <option value="3">DroMenu 3</option>
        <option value="4" selected="selected">Drou 4</option>
        <option value="5">Dro</option>
    </select>
    <br/>
    <input type="checkbox" checked="checked" class="styled" value="voorbeeld-checkbox"/>
    <input type="checkbox" class="styled" value="voorbeeld-checkbox"/>
    <br/>
    <input class="styled" type="radio" name="voorbeeld-radio" checked="checked" value="optie-1" />
    <input class="styled" type="radio" name="voorbeeld-radio" value="optie-2" />
    <textarea rows="2" cols="20"></textarea>
    <input class="styled" type="radio" name="voorbeeld-radio-1" value="optie21" />
    <input class="styled" type="radio" name="voorbeeld-radio-1" value="optie22" />
    <hr />
    <button class="button green">button<span>Arrow</span></button>
    <button class="button blue">button<span>Arrow</span></button>
    <button class="button grey">button<span>Arrow</span></button>
</form>

CSS

/* begin styling form elements */

    /* begin form styling */

    form label {
        float: left;
        padding-top: 5px;
        text-align: left;
        width: 180px;
        display: block;
        margin-bottom: 5px;
        cursor: default;
        padding-left: 5px;
    }
    form label,
    form input,
    form button,
    form select,
    form textarea {
        font-weight: normal;
    }

    form .control-group:after {
        clear: both;
    }
    form .control-group:before,
    form .control-group:after {
        content: "";
        display: table;
        line-height: 0;
    }

    form .control-group {
        margin-bottom: 3px;
    }


    form .control-group.horizontal{
        display: inline-block;
        float: left;
    }
    form .control-group.horizontal .inlineControl {
        display: inline-block;
        padding: 5px 0;
        width: 240px;
    }

    form .control-group.horizontal .inlineLabel {
        display: inline-block;
        padding: 5px 0 5px 5px;
        width: 170px;
    }

    form .control-group .control-label.bold,
    form .control-group.horizontal .inlineLabel.bold {font-weight: 600;}

    form .control-group.overleden{display: none;}

    form .controls {
        margin-left: 150px;
    }
    form .controls label {
        margin-left: 0;
        width: auto;
    }
    form input,
    form textarea{
        width: 206px;
    }

    form .date {
        float: left;
        margin-right: 10px;
        width: 40px;
        text-align: center;
    }
    form .dateSmall {
        float: left;
        margin-right: 10px;
        width: 20px;
        text-align: center;
    }
    /* end form styling */


    /*begin styling selectbox*/
        label.select {
            margin: 0;
            padding: 0;
            width: auto!important;
            float: none;
            display: inline-block;
            position: relative;
            background: #f2f2f2;
            background: -moz-linear-gradient(top,...

JavaScript

/* begin form element styling */
;(function ( $, window, undefined ) {
    var FormStyling = {
        isIPad: "ontouchstart" in window,
        init: function(options) {

            $("select").each( function(index, element) {
                var selectBox = $(element);

                selectBox.on("change", FormStyling.onSelectBoxChange );

                // Wrap selectbox in a label element
                selectBox.wrap("<label class='select'></label>");

                // Create a span element and place it before the selectbox.
                // The span will have the custom styling.
                var span =  $("<span>" + selectBox.find("option:selected").text() + "</span>");
                selectBox.after(span);

                //Fade out the selectbox
                selectBox.fadeTo(0, 0);
            });

            if($.browser.msie === true) FormStyling.ieSelectFallback();

            $("input[type='checkbox']").each( function( index, element ) {
                var checkBox = $(element);

                checkBox.on("change", FormStyling.onCheckBoxChange );

                checkBox.wrap("<label class='checkbox'></label>");
                var span =  $("<span class='unchecked'>" + checkBox.attr("data-label") + "</span>");
                if( checkBox.attr("checked") ) span.addClass( "checked" );
                checkBox.after(span);

                if( FormStyling.isIPad ) {
                    checkBox.parent().on("click", FormStyling.onInputClick );
                }
            });

            $("input[type='radio']").each( function( index, element) {
                var radioBox = $(element);

                radioBox.on("change", FormStyling.onRadioBoxChange );

                radioBox.wrap("<label class='radio'></label>");
                var span = $("<span  class='unchecked'>" + radioBox.attr("data-label") + "</span>");
                radioBox.after(span);

                if( FormStyling.isIPad ) {
                   ...