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://opensource.org/licenses/mit-license.php
Requirements
- Requires jQuery 1.4.2+
- All
form
elements requireid
s.
Note
- Call once your document is loaded. If you are dynamically loading content, use the
repaint
function. - The
input
file should not be wrapped with thelabel
tag. - The sprite order from top to bottom is:
- unchecked
- unchecked-mousedown
- checked
- checked-mousedown
checkboxHeight
andradioHeight
should all be set to 1/4th the sprite height.selectWidth
is the width of the select box image.- Remember that
select
elements cannot bereadonly
; they can bedisabled
though. - As of jQuery 1.4.2, there is an open bug pertaining to jQuery, VML, and IE. Version 0.5+ of this script has a work around.
Example
CSS
.radio,
.checkbox,
.select {
display: inline-block;
cursor: pointer;
background-position: 0 0;
background-color: transparent;
background-repeat: no-repeat;
background-attachment: scroll;
}
.radio {
background-image: url(radios.png);
width: 12px;
height: 11px;
}
.checkbox {
background-image: url(checkbox.png);
padding: 0;
width: 12px;
height: 12px;
}
.select {
background-image: url(select-short.png);
color: #8A7967;
font: 10px/21px arial,sans-serif;
overflow: hidden;
position: absolute;
padding: 0 24px 0 11px;
width: 126px;
height: 21px;
}
Javascript
jQuery(document).ready(function($) {
// Extremely minimum version:
// Default settings apply. All input/select tags with a class of 'styled' are affected.
var cf = new CustomFormElements();
// Minimum version:
var cf = new CustomFormElements({
checkboxHeight: 12,
radioHeight: 11,
selectWidth: 161
});
// All options
var cf = new CustomFormElements({
styled: 'styled',
uniqueClassName: 'customFormElement',
checkboxHeight: 12,
radioHeight: 11,
selectWidth: 161
});
// If you need to reinitialize dynamically added form elements:
cf.repaint();
});