Почему оформленные чекбоксы и радиокнопки не реагируют на нажатия?

Question

[Сергей Золотарёв]

Реализовал кастомные чекбоксы и радиокнопки. Они правильно отображаются (особенно при включённом атрибуте checked), но не реагируют на нажатия.

Как выглядит структура чекбоксов и радиокнопок:

<footer>
                                <div class="check-selectors">
                                    <span class="title-form">FORM OF OWNERSHIP</span>
                                    <div>
                                        <input type="checkbox" value="" checked>
                                        <span>checkbox on</span>
                                    </div>
                                    <div>
                                        <input type="checkbox" value="" checked>
                                        <span>checkbox on</span>
                                    </div>
                                    <div>
                                        <input type="checkbox" value="">
                                        <span>checkbox off</span>
                                    </div>
                                </div>
                                <div class="radio-selectors">
                                    <span class="title-form">AVAILABILITY OF PARKING, SWIMMING POOL, RESTAURANT</span>
                                    <div>
                                        <input type="radio" value="" checked>
                                        <span>radiobutton on</span>
                                    </div>
                                    <div>
                                        <input type="radio" value="" checked>
                                        <span>radiobutton off</span>
                                    </div>
                                    <div>
                                        <input type="radio" value="">
                                        <span>radiobutton off</span>
                                    </div>
                                </div>
         </footer>

Как правильно оформлять элементы управления так, чтобы они эффективно реагировали на действия пользователей?
CSS-код в комментариях.

Comments

[sinneren]

это надо видеть, нужно всё в jsfiddle запилить. по простой хтмлке невозможно понять

[Сергей Золотарёв]

Примеры проблемного CSS-кода:

footer .check-selectors, footer .radio-selectors{
    display: block;
    margin-top: 2%;
}
 footer .check-selectors .title-form, footer .radio-selectors .title-form{
    font-size: 70%;
}
footer .check-selectors div, footer .radio-selectors div{
    font-size: 90%;
    margin-top: 2px;
}
 footer .check-selectors div input,  footer .radio-selectors div input{
    top: 13%;
    position: relative;
}
 footer .check-selectors div span, .objects-adding-search > footer .radio-selectors div span{
    padding-left: 2px;
}

footer .check-selectors div input, 
footer .radio-selectors div input {
    position: absolute;
    left: -9999px;
}

 footer .check-selectors div input + span, 
 footer .radio-selectors div input + span {
    display: inline-block;
    position: relative;
    padding-left: 28px;
    line-height: 20px;
    cursor: pointer;
}

footer .check-selectors div input + span:before, 
footer .radio-selectors div input + span:before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 18px;
    height: 18px;
    border: 1px solid darkgray;
    background-color: darkgray;
}

footer .check-selectors div input + span:before {
    border-radius: 2px;
}

footer .radio-selectors div input + span:before {
    border-radius: 100%;
}

 footer .check-selectors div input + span:after, 
footer .radio-selectors div input + span:after {
    content: "";
    position: absolute;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

footer .check-selectors div input:checked + span:after{
    left: 3px;
    top: 4px;
    width: 10px;
    height: 5px;
    border-radius: 1px;
    border-left: 4px solid dodgerblue;
    border-bottom: 4px solid dodgerblue;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

footer .radio-selectors div input:checked + span:after{
    left: 5px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: dodgerblue;
}

footer .check-selectors div input + span:after, 
 footer .radio-selectors div input + span:after {
    opacity: 0;
}

footer .check-selectors div input:checked + span:after, 
 footer .radio-selectors div input:checked + span:after {
    opacity: 1;
}

[Ankhena]

Конечно, не реагируют.
Вы их отправили абсолютом в космические дали.

Замените span на label и свяжите их с инпутами.
Сами инпуты лучше скрывать с помощью паттерна visually-hidden (гуглится)

[godsplane]

sinneren, че тут не понятного

[Сергей Золотарёв]

sinneren, всё это только что запилил не в JSFiddle:

[Сергей Золотарёв]

Ankhena, такие примеры взял из статьи на Хабр на эту тему, где автор допустил много ошибок, а я в коде их исправил. Работают полноценно, но на нажатия не реагируют так же;-(

[sinneren]

ну как выше сказали, надо поменять на label только не span, а div. label должен или оборачивать, или быть отдельно но с указанием for. тогда клик по label будет менять значение input

[Ankhena]

sinneren, если менять div, а не span, то это + лишняя обертка.
А если менять span на label, то div можно вообще удалить.

[sinneren]

Ankhena, спан потребует айдишники и for атрибут. div уже есть, простая замена. хотя выбирать автору

Answer 1

[godsplane]

нужен не див а label

Comments

[Сергей Золотарёв]

Именно родительские и дочерние label вместо div?

[Сергей Золотарёв]

Спасибо! Меня устроил ваш вариант решения текущего вопроса;-)

[Сергей Золотарёв]

godsplane, хоть чекбоксы работают внутри тега label, а почему радиокнопки внутри этого же тега не работают:

А как это проверить и исправить?

Answer 2

[Alex]

- <div>
+ <label>
  <input type="checkbox" value="" checked>
  <span>checkbox on</span>
- </div>
+ </label>

UPD.
Советую по теме Кастомные чекбоксы