Здравствуйте!
Стилизовал вот так вот чекбоксы в выборке объектов на карте, но почему то после нажатия разом пропадают все объекты и потом сколько не жми не появляются до перезагрузки браузера соответственно. Вот примеры когда html:
<input type='checkbox' id='red' class="animate" checked="true">
<label for="red" class="red">Студии звукозаписи</label>
<input type='checkbox' id='green' class="animate" checked="true">
<label for="green" class="green">Репетиционные базы</label>
<input type='checkbox' id='yellow' class="animate" checked="true">
<label for="yellow" class="yellow">Музыкальные магазины</label>
И пример css:
.animate {
transition: all 0.1s;
-webkit-transition: all 0.1s;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]+label {
display: inline-block;
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
float: left;
border-radius: 10px;
font-size: 25px;
color: #FFF;
text-decoration: none;
}
label.red {
background-color: #ff0000;
border-bottom: 5px solid #BD3E31;
text-shadow: 0px -2px #BD3E31;
}
label.green {
background-color: #82BF56;
border-bottom: 5px solid #669644;
text-shadow: 0px -2px #669644;
}
label.yellow {
background-color: #F2CF66;
border-bottom: 5px solid #D1B358;
text-shadow: 0px -2px #D1B358;
}
input[type=checkbox]:checked+label {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
border-bottom: 1px solid;
}
