Create Working Retro Custom Radio Buttons

Introduction

Last time I released a custom radio buttons PSD Freebie. Now I will show how to implement them on the web. I have been calling them radio buttons, but I am only going to make checkboxes for simplicity. I am basing my code off the wonderful in depth tutorial by Maratz.com

HTML Structure

The basic structure consists of a Label tag to create the custom image as the background, and hides the default radio button.

        <label class="switch-off" for="sample-switch">
		    <input id="sample-switch" name="sample-switch" type="checkbox" value="1" />
		</label>

        <div id="check-container">
			<label class="check-off" for="sample-check2">
			    <input id="sample-check2" name="sample-check2" type="checkbox" value="1" />
        I Enjoyed this Tutorial by WebDesignCrowd
			</label>
        </div>

CSS

I created a sprite for the different states of the switch and checkmark. There are also extra styling for the checkmark to display text within the label along with the checkbox.

	label { background: url(images/RetroRadioSprites.png) no-repeat; display: block; cursor: pointer;}

	label.switch-off {
		background-position: -230px 0px;
		width: 230px;
		height: 97px; }

	label.switch-on {
		background-position: 0px 0px;
		width: 230px;
		height: 97px; }

	#check-container {
		position: relative;
		display: block;
		height: 67px;
	}

	label.check-off {
		float: left;
		position: relative;
		background-position: -529px 0px;
		width: 69px;
		height: 67px; }

	label.check-on {
		float: left;
		background-position: -460px 0px;
		width: 69px;
		height: 67px; }

	p.check-info {
		text-shadow: 1px 1px 1px #111;
		margin: 27px 0 0 70px;
		width: 480px;
		font-size: 20px;
		float: left;
		cursor: pointer;
	}

	input  { display: none; }

jQuery

This is almost exactly copied from the Maratz.com Tutorial It changes the classes of the buttons to change the background image of each element.

$(document).ready(function() {

	$('.switch-off, .check-off').click(function(){
        if ($('.switch-off input').length) {
            $('.switch-off').each(function(){
                $(this).removeClass('switch-on');
            });
            $('.switch-off input:checked').each(function(){
                $(this).parent('label').addClass('switch-on');
            });
        };
		if ($('.check-off input').length) {
            $('.check-off').each(function(){
                $(this).removeClass('check-on');
            });
            $('.check-off input:checked').each(function(){
                $(this).parent('label').addClass('check-on');
            });
        };
    });

});

Conclusion

I want to again reference the Maratz.com Tutorial for the jQuery. Here are the Demo and Download Links in case you missed them.

The post Create Working Retro Custom Radio Buttons appeared first on webdesigncrowd.com.