Чекбоксы
by Kate Mokhova
HTML
<div style="width: 300px;">
<div style="float:left;">
<label><input type="checkbox" name="cust" value="1"><span><p class="checked">Бухгалтерия</p></span></label>
<label><input type="checkbox" name="cust" value="1"><span><p class="checked">Диадок</p></span></label>
<label><input type="checkbox" name="cust" value="1"><span><p class="checked">Декларант</p></span></label>
<label><input type="checkbox" name="cust" value="1"><span><p class="checked">Отчет.ру</p></span></label>
</div>
<div style="float:right;">
<label><input type="checkbox" name="cust" value="1"><span><p class="checked">ФМС</p></span></label>
<label><input type="checkbox" name="cust" value="1"><span><p class="checked">Экстерн</p></span></label>
<label><input type="checkbox" name="cust" value="1"><span><p class="checked">EDI</p></span></label>
<label><input type="checkbox" name="cust" value="1"><span><p class="checked">152</p></span></label>
</div>
</div>CSS
body
{
padding: 100px;
font-family: Helvetica;
font-size: 16px;
}
label{
width: 16px;
height: 16px;
display: block;
position: relative;
cursor: pointer;
border: 2px solid #E0E0E0;
margin: 10px;
}
label.checked {
border-color: transparent;
}
label:hover {border-color: #e0e0e0; transition: 1s ease-out 0.05s}
p{display: inline; position: relative; top: 2px; left:26px; color: #B7B7BF;}
p:hover{color: #404040;}
input{
visibility: hidden;
}
input + span{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
input:hover + span{
background: url(https://img-fotki.yandex.ru/get/15534/54602231.1/0_c6173_62ea4932_S) no-repeat 50%;
transition-property: opacity;
transition-duration:0.05s;
}
input:checked + span {
background: url(https://img-fotki.yandex.ru/get/15527/54602231.1/0_c6172_2869361_S) no-repeat 50%;
}
input:checked + span p{color: #404040;}JavaScript
/*$( "input" ).on('change', function (e) {
var isChecked = $(e.currentTarget).prop('checked');
$(e.currentTarget).parent().addClass('checked', isChecked);
});*/
$('input').click(function() {
$(this).parent().toggleClass('checked');
});