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”).
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">
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; }
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); } });
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[]">'; } }); $('.multi-inputs').html(multi_hidden); });
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); });