Почему не работает checkbox в стандартной схеме?

Question

[Oslar]

Ссылка на сайт

.confirm input[type="checkbox"] {display:none;}
.confirm input[type="checkbox"] + label {cursor:pointer;}
.confirm input[type="checkbox"] + label span {
    float: left;
    width:24px;
    height:24px;
    margin:-1px 10px 0 0;
    vertical-align:middle;
    background:url(../images/check_2.png) 0 0 no-repeat;
    cursor:pointer;
}

.confirm input[type="checkbox"]:checked + label span {
    background:url(../images/check.png) 0 0 no-repeat;
}

<div class="confirm clearfix">
            	<input type="checkbox" checked="checked" name="confirm" /> 
		 		<label class="clearfix" for="confirm">
		 			<span></span>
		 			<p>
		            	Нажимая "Записаться", я даю 
		            	<a href="/politika-obrabotki-personalnykh-dannykh.php" target="_blank">согласие на обработку персональных данных</a>
		            </p>
		 		</label>
            </div>

Answer 1

[Ankhena]

Не работает, потому что label связывается с input по id, а не по name.

p.s. зачем вы голубой квадратик делаете картинкой? background-color где-то не поддерживается?

Comments

[Ankhena]

1. А еще у вас картинки перепутаны с галочкой и без нее.

2. Хорошо бы переделать всю конструкцию.
Для квадратика использовать ::before, задать ему display block.
Чистый фон переделать в цвет.
Родителю убрать float и бррррр claerfix'ы, всё равно ведь флексы используете в верстке.

Галочку тоже можно делать не картинкой, а символом в content для ::before либо двумя бордерами, но тогда для ::after.

Answer 2

[Alibek Kulseitov]

Добавьте к input id="confirm" и все