Как отметить чекбокс?

Question

[Extra0]

Есть такой код:

<div class="search-places">
        <em>Искать в разделах:</em>
        <label><span></span><input type="checkbox">Рейтинг</label>
        <label><span></span><input type="checkbox">Тендеры</label>
        <label><span></span><input type="checkbox">Справочник</label> 
        <label><span></span><input type="checkbox">Новости</label>
        <label><span></span><input type="checkbox">Все разделы</label>
 </div>

и Css:

.search-places input[type="checkbox"] {
    display: none;
}
.search-places label span {
    margin-right: 20px;
    position: relative;
}
.search-places label span:after {
    content: '';
    position: absolute;
    background: url(../img/check.png) 0 0 no-repeat;
    width: 16px;
    height: 15px;
    top: 1px;
    left: 0px;
}
.search-places label :checked +span:after {
    background-position: -16px 0px;
}

Не могу понять почему при клике на label не меняется картинка

Answer 1

[andreloster]

habrahabr.ru/post/144104

Comments

[Extra0]

Спасибо!

Answer 2

[Петруша Укропов]

:checked +span:after
Ты хоть понимаешь смысл написанного? + означает что ты хочешь обратиться к последующему элементу, в то время как спан находится перед чекбоксом.