Checbox with box style

Question

Im trying to do a list of checkbox with the style of a box with an icon inside, I found this example but i dont know how to do it, any idea?

This is the code of the image, but i need an checkbox and the css files...

<ul class="whitBigIcons clearfix">
<li class="">
    <a href="#">
        <i class="mesa-icon"></i>
        <p class="mb0">Pagos, facturación y trámites administrativos</p>
    </a>
</li>

What I would do is to hide the checkboxes and use instead with 2 images (one for inactive and one for active). The logic for the css is the following: 1.by default span has image (when checkbox is inactive) 2. click the span (this also clicks the checkbox) and target the span with input[type=checkbox]:checked + span and change the image Sometime ago I too needed to do something like that and I got my working solution from here: http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css I hope this helps EDIT: the working example is of @Blake Pettersson — yavor.vasilev, Jan 19 '17 at 15:12

score 0 · Answer 1 · answered Jan 19 '17 at 16:19

Your html can be like

<label>
    <input type="radio" name="option">
     <span>
        <i>ico</i> Option One
    </span>
</label>
<label>
    <input type="radio" name="option">
    <span>
        <i>ico</i> Option Two
    </span>
</label>
<label>
    <input type="radio" name="option">
    <span>
        <i>ico</i> Option Three
    </span>
</label>

And then you can style the <span> using the :checked pseudo selector along with the adjacent selector +, like this:

input + span { initial state }
input:checked + span { checked state }

score 0 · Answer 2 · answered Jan 19 '17 at 16:30

i made a script for you check below link:
https://jsfiddle.net/fatehjagdeo/uxd2ppj3/

it shows that li will active according to your click . please check it once
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<ul class="whitBigIcons clearfix">
<li class="">
    <a href="#">
        <i class="mesa-icon"></i>
        <p class="mb0">Pagos, facturación y trámites administrativos</p>
    </a>
</li>
<li class="">
    <a href="#">
        <i class="mesa-icon"></i>
        <p class="mb0">Pagos, facturación y trámites administrativos</p>
    </a>
</li>
<li class="">
    <a href="#">
        <i class="mesa-icon"></i>
        <p class="mb0">Pagos, facturación y trámites administrativos</p>
    </a>
</li>
<li class="">
    <a href="#">
        <i class="mesa-icon"></i>
        <p class="mb0">Pagos, facturación y trámites administrativos</p>
    </a>
</li>
</ul>

<script>
$(document).on('click','ul li',function(){
var obj=$(this);
$('ul li').each(function(){
$(this).removeClass('active');
});
obj.addClass('active');
});
</script>
<style>
.active{
  background:#0099cc;
}
</style>

Checbox with box style

2 Answers2