Клуб API Карт

Стилизация пунктов

Pikmin
25 мая, 21:11

Здравствуйте!
Стилизовал вот так вот чекбоксы в выборке объектов на карте, но почему то после нажатия разом пропадают все объекты и потом сколько не жми не появляются до перезагрузки браузера соответственно. Вот примеры когда 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;
}


4 комментария
Подписаться на комментарии к посту
Представление не влияет на поведение. Пример работает с этим css. Скорее всего вы ошиблись где-то в javascript коде.


На будущее, публикуя вопрос, собирайте пример своего кода на jsfiddle, а не в теле поста
dimik,

То что надо!
Благодарю вас!
dimik,

Возник еще вопрос
Возможно ли в данном случае как то стилизовать эти метки их содержимое?
Pikmin,
Можно прочитать раздел руководства про стили меток и посмотреть на таблицу стилей в документации