The most simple custom checkboxes and radios
Monday, November 15th, 2010 | Author:

Custom designed checkboxes and radio buttons are very common subject on the web, but that didn’t stop me from writing this post about my approach to that problem. I like to keep things simple and that is certainly one of them.

Javascript uses MooTools to apply some classes and events to labels around inputs. If javascript is disabled nothing happens; all checkboxes and radios remain unstyled.

You need to put label tags around you input tags. That’s because of:
1.) easy CSS styling
2.) clickability (label click automatically affects the input child)

CSS:

label.check {
	background: url(check_off.gif) no-repeat left center;
	padding-left: 15px;
}
 
label.check.on {
	background: url(check_on.gif) no-repeat left center;
}
 
label.radio {
	background: url(radio_off.gif) no-repeat left center;
	padding-left: 15px;
}
 
label.radio.on {
	background: url(radio_on.gif) no-repeat left center;
}

You just have to style those labels a little bit to behave as custom checkbox or radio buttons.

XHTML:

<form method="get" action="#">
	<fieldset>
		<label><input type="checkbox" value="1" name="check[]" class="custom"/> Checkbox 1</label>
		<label><input type="checkbox" value="2" name="check[]" class="custom"/> Checkbox 2</label>
		<label><input type="checkbox" value="3" name="check[]" class="custom"/> Checkbox 3</label>
		<br/><br/>
		<label><input type="checkbox" value="1" name="test[]" class="custom"/> Test 1</label>
		<label><input type="checkbox" value="2" name="test[]" class="custom"/> Test 2</label>
		<label><input type="checkbox" value="3" name="test[]" class="custom"/> Test 3</label>
		<br/><br/>
		<label><input type="radio" name="radio" value="1" class="custom"/> Radio 1</label>
		<label><input type="radio" name="radio" value="2" class="custom"/> Radio 2</label>
		<label><input type="radio" name="radio" value="3" class="custom"/> Radio 3</label>
		<br/><br/>
		<label><input type="radio" name="tv" value="1" class="custom"/> TV 1</label>
		<label><input type="radio" name="tv" value="2" class="custom"/> TV 2</label>
		<label><input type="radio" name="tv" value="3" class="custom"/> TV 3</label>
		<br/><br/>
		<input type="submit" value="Send"/>
	</fieldset>
</form>

It is absolutely necessary to put labels around inputs. The label becomes active only if the input has class=”custom”.

Javascript (be sure to have MooTools):

<script type="text/javascript">
	$$('input[type=checkbox].custom').each(function(el){
		el.getParent('label').addClass('check').addEvent('click',function(){
			if(el.checked) this.addClass('on'); else this.removeClass('on');
		}); 
		el.setStyle('display','none');
	});
	$$('input[type=radio].custom').each(function(el){
		el.getParent('label').addClass('radio').addEvent('click',function(){
			$$('input[name='+el.name+']').each(function(rad){
				rad.getParent('label').removeClass('on');
			})
			this.addClass('on');
		}); 
		el.setStyle('display','none');
	});
</script>

And this is everything. Of course you should style your labels much more as I did. My effort for this example was as easy as it could be. Demo here.

Category: Web development  | Tags: , ,  | One Comment