A lightweight custom form styler for radio, checkbox and select elements.
JavaScript
Latest commit 482a2cd Jul 18, 2013 @karbassi Merge pull request #14 from webster/stable
Address issue where inputs with periods in name attribute would cause Cu...
Permalink
Failed to load latest commit information.
demo
README.md Adding jQuery plugin repo details. Tagging 2.0.0 Jan 19, 2013
custom-form-elements.jquery.json Adding jQuery plugin repo details. Tagging 2.0.0 Jan 19, 2013
custom-form-elements.js
custom-form-elements.min.js Address issue where inputs with periods in name attribute would cause… Mar 28, 2013
package.json Fixed package.json some more. Jun 14, 2013

README.md

Custom Form Elements

Maintained?

A lightweight custom form styler for radio, checkbox and select elements. Radio and Checkboxes have four states rather than just two.

Developed by Ali Karbassi.

This project lives on GitHub: http://github.com/karbassi/Custom-Form-Elements

This whole project is licensed under the MIT License: http://karbassi.mit-license.org

Tested Environments

Desktop

  • Firefox 3.5+
  • Chrome 10+

Mobile

  • iPhone 4 w/ iOS 5.1
  • iPad w/ iOS 5.1

Requirements

Note

  • Call once your document is loaded.
  • If you are dynamically loading content, use the repaint function.

Demo

http://karbassi.github.com/Custom-Form-Elements/demo.html

Example

CSS

.cfe-radio,
.cfe-checkbox,
.cfe-select,
.cfe-file {
    display: inline-block;
    cursor: pointer;
    background: 0 0 no-repeat;
}

.cfe-radio,
.cfe-checkbox {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.cfe-radio {
    background: url(radios.png);
    width: 12px;
    height: 11px;
}

.cfe-radio.cfe-state-0 { background-position: 0 0; }
.cfe-radio.cfe-state-1 { background-position: 0 -11px; }
.cfe-radio.cfe-state-2 { background-position: 0 -22px; }
.cfe-radio.cfe-state-3 { background-position: 0 -33px; }

.cfe-checkbox {
    background: url(checkbox.png);
    width: 12px;
    height: 12px;
    padding: 0;
}

.cfe-checkbox.cfe-state-0 { background-position: 0 0; }
.cfe-checkbox.cfe-state-1 { background-position: 0 -12px; }
.cfe-checkbox.cfe-state-2 { background-position: 0 -24px; }
.cfe-checkbox.cfe-state-3 { background-position: 0 -36px; }

.cfe-select,
.cfe-file {
    font: 10px/21px arial,sans-serif;
    color: #8A7967;
    overflow: hidden;
    position: absolute;
    padding: 0 24px 0 11px;
    width: 126px;
    height: 21px;
}

.cfe-select {
    background: url(select.png);
}

select.cfe-styled {
    position: relative;
    width: 161px;
}

.cfe-file {
    background: url(file.png);
}

/* Disabled style */
.cfe-disabled,
.cfe-readonly {
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

    /* IE 5-7 */
    filter: alpha(opacity=50);

    /* CSS3 */
    opacity: 0.5;
}

Javascript

jQuery(document).ready(function($) {

    // Default settings apply.
    // All input/select tags with a class of 'cfe-styled' are affected.
    var cf = new CustomFormElements();

    // All options
    var cf = new CustomFormElements({
        cssClass: 'styled'
    });

    // If you need to reinitialize dynamically added form elements:
    cf.repaint();

});