Checbox与框样式

Question

我试图用一个带有图标的框的样式做一个复选框列表，我找到了这个例子，但我不知道怎么做，任何想法？

这是图片的代码，但我需要一个复选框和css文件......

"a(a[ab]|ba)"

Answer 1

您的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 }

Answer 2

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>