Как при нажатии на checkbox менять стили не label, а div блока, в котором находится checkbox?

Question

[Sp1keazyYT]

Добрый день. Имеется следующий код:

В стилях у меня прописано:

.checkbox-new-postr input[type=checkbox]:checked + label{
	color: white;
	background: #e08543;
}

Это означает, что вместе с активным checkbox у меня будут применяться стили к label. А теперь как этот код переработать, чтобы при активации checkbox у меня применялись стили (выше) на блок div с классом .checkbox-new-postr?

Comments

[FeST1VaL]

1. Так нельзя
2. А зачем вам так?)

[Sp1keazyYT]

Артем Будин, Зайди на сайт - postroeno.bitrixstudio24.ru . Как мне сделать, чтобы при нажатии на кнопку - Гараж или Терраса, у меня закрашивалась вся кнопка, а ни только её середина?

Answer 1

[Kirill]

В CSS нет родительских селекторов. Решение возможно через .parentNode JavaScript

'use strict';
document.addEventListener('DOMContentLoaded', () => {

    let checkbox = document.querySelector('label[for="aux_prem"]');

    checkbox.addEventListener('click', function()
    {
    	let parent = this.parentNode;
    	
    	( !parent.classList.contains('selected') ) ?
    			parent.classList.add('selected'):
    			parent.classList.remove('selected');
    });

});

Comments

[Sp1keazyYT]

Может есть смысл не делать куча костылей. Зайди пожалуйста на сайт - postroeno.bitrixstudio24.ru . Как мне сделать, чтобы при нажатии на кнопку - Гараж или Терраса, у меня закрашивалась вся кнопка, а ни только её середина?

[Sp1keazyYT]

Пустые поля - из-за col-md-3, который я назначил div блоку. Тогда как сделать, чтобы стало всё ровно и вот так:

[Kirill]

Sp1keazyYT,

[Kirill]

Sp1keazyYT, установить ширину лейблу в 100% и убрать паддинг у garage_block