Возможно ли создать красивый checkbox, который внутри label?

Question

[Борис Белов]

Имеется код

<label><input type="checkbox" name="_sft_post_tag[]" value="raspashnoj-shkaf" data-sf-cr="_sft_16" data-sf-hide-empty="0"> распашной шкаф</label>

Вынести input за label я не могу.
Максимум чего я смог достичь это вот


Код брал отсюда
jsfiddle.net/abhitalks/mxkqq4Lg/3

Там есть такой параметр, который создает стиль если мы чекаем чекбокс, то лейбл получает стиль

input[type=checkbox]:checked + label {
    border: 1px solid #4575ab;
    color: #4575ab;
}

Но в моем случае, если я чекаю чекбокс у меня так не получается, потому что он находится ВНУТРИ лейбла. Если какой нибудь лайфхак?

Comments

[Ярослав Иванов]

А почему не можете ?

[Борис Белов]

Сам стиль в целом получился. Но не могу сделать при нажатии на чекбокс. Он не стилизуется

Answer 1

[Сергей Горячев]

Вообще, label для этого и придуман, чтобы не тыкать в мини-кнопку checkbox'а.
И по примеру, который вы дали, все работает.
Либо давайте свой нерабочий код, либо ищите ошибку.
jsfiddle.net/webirus/84b65vqq - пример простого label и checkbox.
Полностью код брать примера не советую, переделайте немного просто.

Comments

[Александр]

В примере стилизация лэйбла с "for", идущего после инпута. А вопрошающему нужно, чтобы лэйбл оборачивал инпут.

[Борис Белов]

Сам стиль в целом получился. Но не могу сделать при нажатии на чекбокс. Он не стилизуется

Answer 2

[Александр]

Нужно использовать дополнительный элемент после input. Например - span. И переделать код в:

input[type=checkbox]:checked + span {
    border: 1px solid #4575ab;
    color: #4575ab;
}

Comments

[Борис Белов]

Не могу. Есть только label и input

[Александр]

Борис Белов: тогда только javascript-ом. Проставлять родительскому лэйблу класс 'checked'.