Styling Checkbox and Radio Buttons

If you search online, you will find lots of different approach in styling checkboxes and radio buttons. Below is how I style my them.

HTML:

<!-- Radio Button -->
<div class="my_checkbox">
	<label>
		<i class="fa fa-check" aria-hidden="true"></i>
		<input type="radio" name="name" value="attending" />
	</label>
	Attending
</div>

<!-- Checkbox -->
<div class="my_checkbox">
	<label>
		<i class="fa fa-check" aria-hidden="true"></i>
		<input type="checkbox" name="gender" value="male" />
	</label>
	Male
</div>
<div class="my_checkbox">
	<label>
		<i class="fa fa-check" aria-hidden="true"></i>
		<input type="checkbox" name="gender" value="female" />
	</label>
	Female
</div>

SCSS:

.my_checkbox {
	label {	
	    width: 15px;
	    height: 15px;
	    margin-right: 10px;
	    border: solid green 2px;
	    border-radius: 2px;
 	    display: inline-block;

	    i {
	    	color: green;
	    	visibility: hidden;
	    }
 
		input[type="checkbox"],
		input[type="radio"] {
			position: absolute;
			-webkit-appearance: none; /* Chrome, Safari, Opera */
			-moz-appearance: none;    /* Firefox */
			-ms-appearance: none;     /* not currently supported */
			outline: none;
			margin: 0;
			height: auto;
		}
	}
 
	&.checked {
 
		label {
		    i {
		    	visibility: visible;
		    }
		}
	}	
}	

Scripts:

	$jx('.my_checkbox label input[type="checkbox"]').live('click', function() {
		if ($jx(this).is(':checked')) {
			$jx(this).parents('div.my_checkbox').addClass('checked');
		}
		else {
			$jx(this).parents('div.my_checkbox').removeClass('checked');
		}
	});
 
	$jx('.my_checkbox label input[type="radio"]').live('click', function() {
		$name = $jx(this).attr('name');
		$jx('input[name="' + $name + '"]').parents('div.my_checkbox').removeClass('checked');
		$jx(this).parents('div.my_checkbox').addClass('checked');
	});

Note:

This requires that you have font awesome included, otherwise you can replace it with an image tag and replace i with img from your Sass.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPrint this pageEmail this to someone

Leave a Reply

Your email address will not be published. Required fields are marked *