Home

Welcome to the Custom-radio-checkbox-buttons wiki!

This plugin wrap default buttons with 'span' tag and emulate behavior of elements, it also react on label click.

Work in IE6+ and all new browsers.

jQuery 1.6 + compatible

Usage:

$('your checkbox or radio selector').Custom({
    customStyleClass:'classForCustomView',
    customHeight:'height of checkbox or radio'
});

---

Example:

$('input[type="checkbox"]').Custom({
    customStyleClass:'checkbox',
    customHeight:'16'
});

---

Also need styles like this:

.checkbox {
    position:relative;
    height: 20px;
    width: 20px;    
    overflow:hidden;
    clear:left;
    float:left;
    margin: 0 0 3px;
    padding: 0 0 0 26px;
    background: url("checkbox.png") no-repeat;
    cursor: default;
    text-align:left;
}

.checkbox input{
    position:absolute;
    left:-999px;
}

Where checkbox.png sprite of checkbox with 4 states:

1. Unchecked;
2. Unchecked mouse down;
3. Checked;
4. Checked mouse down;

Like this one:

or this:

You can use different checkboxes and radio on 1 page as much as you want. You need call plugin with different customStyleClass on different objects.

If you need disable or enable button update them like this(in demo.html):

$('#radio3').removeAttr('disabled').trigger('custom.refresh');
$('#radio3').attr('disabled','disabled').trigger('custom.refresh');

---

If you dinamical added button just recall plugin after html with buttons added(in demo.html):

Create input then call:

$(".radioclass").Custom({
  customStyleClass:'radio',
  customHeight:'25'
});

---