Как добавить стили к input[type="checkbox"] и сделать окно со скролом?

Question

[Данил Ларионов]

Хочу сделать вот такую штуку, надеюсь вы сможете мне помочь)
В картинке то что мне нужно сделать, предыдущий код к примеру)
К примеру
HTML

Вот как примерно выглядит html код
CSS
.filter-title {
font-size: 38px;
color: #d70506;
}

.filter-link {
font-size: 30px;
color: #d70506;
}

.filter hr {
background: #000;
width: 65%;
margin-left: 8%;
}

.filtres hr {
margin-left: 1%;
}

.filtres .filter-list {
overflow-y: scroll;
overflow-x: hidden;
max-height: 250px;
}

.filter-list {
margin-top: 10%;
}

.row .filter-checkbox {
opacity: 0;
position: absolute;
width: 40%;
height: 1.5%;
}

.filter-element {
font-size: 22px;
cursor: default;
font-weight: normal;
margin-left: 8%;
}

label {
margin-bottom: .1em;
}

.filter-element:before {
content: " ";
color: #000;
display: inline-block;
top: 1px;
margin-right: 12px;
font-size: 17px;
position: relative;
width: 17px;
line-height: 1.1;
height: 17px;
background: #FFF;
border: 1px solid #818181;
border-radius: 3px;
}

.filter-checkbox:checked + .filter-element:before {
content: "✔";
}

.filter-checkbox:disabled + .filter-element:before {
background: #fff;
color: #000;
}

Comments

[Ankhena]

1. Нельзя складывать label в label
2. Нужно связать label со своим input через id и for.
3. Дальше правильно. Ну разве что before лучше писать ::before

Либо стилизуйте используя appearance
Но первые 2 пункта это не отменяет.

[Антон Литвиненко]

не надо вкладывать label в label. А на глаз вроде более менее все в коде, в чем вопрос то?

[Данил Ларионов]

Ankhena, спасибо

[Ankhena]

Данил Ларионов, а за скролл отвечает свойство overflow

[Данил Ларионов]

Антон Литвиненко, вопрос в том что при вот таком действии, если установлю видимость input появляеться вот такая штука
Суть проблемы в том что когда я нажимаю на checkbox или на надпись checkbox не закрашивается галочкой, а закрашивается когда нажимаю куда угодно рядом с надписью. Не знаю как это исправить, поэтому и допускал ошибки в html

[Данил Ларионов]

Антон Литвиненко, поэтому вот и спрашиваю как можно сделать такие стили при таком функционале, нужно что бы оно нормально отмечалось и при нажатии на надпись и при нажатии на чекбокс, если вы сможете помочь буду очень благодарен

[Данил Ларионов]

Ankhena, спасибо, это я понимаю и с дизайном скролла разберусь, но вопрос в том что при вот таком действии, если установлю видимость input появляеться вот такая штука
5ec68e080c490454831817.jpeg
Суть проблемы в том что когда я нажимаю на checkbox или на надпись checkbox не закрашивается галочкой, а закрашивается когда нажимаю куда угодно рядом с надписью. Не знаю как это исправить, поэтому и допускал ошибки в html

[Данил Ларионов]

Ankhena,

[Ankhena]

Данил Ларионов, сам чекбокс скрывается с помощью css паттерна visually-hidden (гуглится).

Про нажатия не все ясно. Разве что вы не разобрались с лейблами.
Сделайте песочницу jsfiddle.net

[Данил Ларионов]

Ankhena, допустим есть такое вот https://jsfiddle.net/8uqofw0t/
Подскажите как настроить что бы работало корректно, я думаю там сразу понятно что не так)
Спасибо большое за совет использовать песочницу)

[Ankhena]

Данил Ларионов,
1. Сам инпут должен быть доступно скрыт. У вас нет. У вас он растянут на всю ширину обертки. Гуглить "доступное скрытие" или "паттерн visually-hidden"
2. У каждого инпута должен быть id и label и input должны быть связаны через for и id.

[Данил Ларионов]

Ankhena, огромное спасибо, это оказалось очень просто)