Making Custom Dummy Checkboxes Using CSS, jQuery & Font Awesome

 

Let’s face it, checkboxes are ugly. Their appearance changes on different operating systems and devices, and not all browsers support altering the look of checkboxes via CSS.

So here’s our simple solution to creating dummy checkboxes using CSS, jQuery and Font Awesome that are much more pleasing to the eye!

Note that the inputs that are populated by the dummy checkboxes are shown for demonstration, really they should be hidden (type=”hidden”).

See The Demo

 

Dependencies

For all of these examples, you need to include jQuery and FontAwesome. Here are the CDN versions if you don’t want to host locally:

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

The CSS

ul {
	list-style:  none;
	margin: 0;
	padding: 0;
}

.dummy-checkbox {
	margin-bottom:  20px;
	text-align:  left;
}

.dummy-checkbox li {
	margin-bottom: 10px;
	cursor: pointer;
	color: #888;
	font-size: 12px;
	position: relative;
	padding: 0 0 10px 36px;
}

.dummy-checkbox li.checked,.dummy-checkbox li:hover {
	color: #333;
}

.dummy-checkbox li span {
	display: inline-block;
	border: 1px solid #E2E2E2;
	color: #136EB2;
	background: #eaeaea;
	width: 26px;
	line-height: 26px;
	height: 26px;
	text-align: center;
	font-size: 30px;
	vertical-align: middle;
	margin-right: 15px;
}

.dummy-checkbox li.checked span:before,.dummy-checkbox li:hover span:before {
	content: "\f00c";
	font-family: FontAwesome;
}

.dummy-checkbox li strong {
	display: inline-block;
	font-size: 16px;
	vertical-align: middle;
}

Basic Example

So for a simple true or false checkbox here is the HTML you need:

<ul class="dummy-checkbox single">
	<li><span></span><strong>This is a single checkbox</strong></li>
</ul>
<input type="text" id="single" name="single">

jQuery

$('.dummy-checkbox.single li').click(function() {
	$(this).toggleClass('checked');
	if($(this).hasClass('checked')) {
		$('#single').val(1);
	} else  {
		$('#single').val(0);
	}
});

Multiple Checkboxes

The HTML:

<ul class="dummy-checkbox multiple">
	<li data-value="1"><span></span><strong>This is a multiple checkbox</strong></li>
	<li data-value="2"><span></span><strong>This is another multiple checkbox</strong></li>
	<li data-value="3"><span></span><strong>This is yet another multiple checkbox!!!!</strong></li>
</ul>
<!-- Our hidden checkbox inputs will be inserted below -->
<div class="hidden multi-inputs"></div>

jQuery:

$('.dummy-checkbox.multiple li').click(function() {
	multi_hidden = '';
	$(this).toggleClass('checked');
	if($(this).hasClass('checked')) {
		$('#single').val(1);
	} else  {
		$('#single').val(0);
	}
	$('.dummy-checkbox.multiple li').each(function() {
		if($(this).hasClass('checked')) {
			var value = $(this).attr('data-value');
			multi_hidden += '<input type="text" value="'+value+'" name="multi&#91;&#93;">';
		}
	});
	$('.multi-inputs').html(multi_hidden);
});

Checkbox-Style Radio Buttons

HTML:

<ul class="dummy-checkbox radio">
	<li data-value="1" class="checked"><span></span><strong>This is a selected checkbox-style radio button</strong></li>
	<li data-value="2"><span></span><strong>This is another checkbox-style radio button</strong></li>
	<li data-value="3"><span></span><strong>This is yet another checkbox-style radio button!!!!</strong></li>
</ul>
<input type="text" id="radio" name="radio" value="1">

jQuery

$('.dummy-checkbox.radio li').click(function() {
	var value = $(this).attr('data-value');
	$('.dummy-checkbox.radio li').removeClass('checked');
	$(this).addClass('checked');
	$('#radio').val(value);
});

See The Demo

Free Graphics, Icons, Tutorials
Free Graphics Free Fitness Vector Icons Graphics PackFree Camping Vector Graphics PackFree Summer Graphics PackFree File Icon PackFree Fast Food Vector GraphicsFree Music Controls Vector Icon Pack
Sharing is caring...
Like & Follow
Share the love, share this page! Facebook Twitter Google Digg Reddit LinkedIn Pinterest Email
Close [X]
The Web Taylor
1000 Lakeside North Harbour Portsmouth, Hampshire PO6 3EN
02392 123358