jQuery UI Form Inputs WITHOUT PLUGINS

by bizamajig

HTML

<link rel="stylesheet" href="http://static-stage.maklarpaket.se/admin/css/jquery-ui-custom.css">
<form>
    
    <fieldset>
        
        <legend>Fieldset</legend>
    
        <label>Text input element</label>
        <input type="text" />
        
        <label>Textarea</label>
        <textarea style="width: 300px; height: 100px;"></textarea>
        
        <label>Selectbox:</label>
        <select name="select">
            <option>Alpha</option>
            <option>Beta</option>
            <option>Gamma</option>
            <option>Omega</option>
        </select>
        
        <label><input type="checkbox" /> This is a checkbox</label>
        
        <br />
        
        <label><input name="radio" type="radio" /> This is a radio</label>
        <label><input name="radio" type="radio" /> This is a radio</label>
        
        <br />
        <br />
        
        <input type="submit" />
        
        <br />
        
        <button>Button</button>
        
        <br /><br />
        
        <input type="button" disabled="disabled" value="Disabled" />
        
        <br />
        
    </fieldset>

</form>

CSS

/*
 * jQuery UI Select @VERSION
 *
 * Copyright 2011, Marcus Ekwall (http://writeless.se)
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Button#theming
 */
.ui-select {
    display: block;
    cursor: pointer;
}

.ui-select-menu,
.ui-select-menu ul {
    cursor: default;
    width: 100%;
    margin: 0;
    padding: 0;
}

.ui-select-menu .ui-select-group {
    font-weight: bold;
}

.ui-select-menu .ui-select-group > a {
    cursor: default;
}

.ui-select-menu .ui-select-group ul {
    font-weight: normal;
    margin-top: 0.2em;
}

.ui-select-menu .ui-menu-item a.ui-state-active,
.ui-select-menu .ui-menu-item a.ui-state-hover {
    margin: 1px;
}

.ui-select-menu .ui-menu-item a {
    margin: 2px;
}

JavaScript

(function($, undefined){
// role=application on body required for screenreaders to correctly interpret aria attributes
if (!$(document.body).is('[role]')) {
    $(document.body).attr('role', 'application');
}
$.widget("ui.form",{
    options: {
        submit: function(){}
    },
    _init: function() {
        var object = this,
            form = object.element,
            inputs = form.find("input, select, textarea").not(":submit, :button"),
            selects = inputs.filter("select"),
            buttons = form.find("button, input:button, input:submit");
         
        inputs
            .addClass("ui-corner-all ui-state-default").bind({
                mouseover: function(){
                    $(this).addClass("ui-state-hover");
                },
                mouseout: function(){
                    $(this).removeClass("ui-state-hover");
                },
                focus: function(){
                    $(this).addClass("ui-state-focus");
                },
                blur: function() {
                    $(this).removeClass("ui-state-focus");
                }
            })
            .filter(":checkbox").parent().addClass("ui-form-checkbox-label")
            .end().end()
            .filter(":radio").parent().addClass("ui-form-radio-label");

        form
            .addClass("ui-form ui-widget")
            .find("fieldset").addClass("ui-widget-content ui-corner-all")
            .end()
            .find("legend").addClass("ui-widget-header ui-corner-all");

        if (typeof this.options.submit == 'function') {
            form.submit(this.options.submit);
        }
        
        if (typeof $.ui.select !== 'undefined') {
            selects.select();
        }
        
        if (typeof $.ui.button !== 'undefined') {
            buttons.button();
        }
    }
});
})(jQuery);

/*
 * jQuery UI Select @VERSION
 *
 * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT...