Я пытаюсь сделать список флажков со стилем коробки со значком внутри, я нашел этот пример, но я не знаю, как это сделать, любая идея? 
Checbox with box style
Это код изображения, но я нужен флажок и файлы CSS ...
<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>
Ваш HTML может быть как
<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>
А потом вы можете нарисовать <span>, используя псевдоселектор :checked, а также смежный селектор +, например:
input + span { initial state }
input:checked + span { checked state }
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>
Что бы я сделал это, чтобы скрыть флажки и использовать вместо 2 изображений (по одному для неактивных и один для активного). Логика для css следующая: 1. по умолчанию у span есть изображение (если флажок неактивен) 2. щелкните по диапазону (это также щелкнет по флажку) и настройте диапазон с помощью ввода [type = checkbox]: checked + span и изменить изображение Когда-то мне тоже нужно было что-то сделать, и я получил свое рабочее решение отсюда: http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css Надеюсь, это поможет EDIT: рабочий пример от @Blake Pettersson –
Ищите переключатель «input» с надписью «label»? – kukkuz