箱盒风格的盒子

-1

我试图做一个箱子里面有一个图标的样式复选框的列表，我发现这个例子，但我不知道该怎么做，任何想法？箱盒风格的盒子

这是图像的代码，但我需要一个复选框和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>

来源

2017-01-19 Ale Guzman

我会做的是隐藏的复选框，并用2幅图像（一个非活动和一个有源）使用代替。 css的逻辑如下： 1.默认跨度有图像（当复选框不活动时） 2.单击跨度（这也会点击复选框）并通过输入[type = checkbox]定位跨度：选中+跨度和更改图像前段时间我也需要做这样的事情，我从这里得到了我的工作解决方案：http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css 我希望这可以帮助编辑：工作的例子是@Blake Pettersson –

寻找与'标签''输入'单选按钮？ – kukkuz

你的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>

然后您可以使用:checked伪选择器以及相邻选择器+来设计<span>，如下所示：

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

来源

2017-01-19 16:19:33

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>

来源

2017-01-19 16:30:18

箱盒风格的盒子

回答

相关问题