Недавно я столкнулся с одной проблемой, когда при кастомном чекбоксе не работает встроенная валидация браузера. Под встроенной валидацией я понимаю атрибут required. Браузер встроенными средствами проверяет данное поле на его заполненность. Еще это называют защитой от дурака.
<input name="data" id="data" type="checkbox" class="hidden" checked required> <label for="data">Я согласен на обработку персональных данных</label>

Вот как это выглядит, я нажимаю на кнопку, но предупреждение не высвечивается.
Почему не высвечивается окно предупреждения? Механизм кастомного чекбокса предполагает скрытие настоящего средствами css, обычно с помощью свойства
display:none;
Как исправить эту ошибку?
Во-первых нужно избавиться от display:none; и заменить на opacity: 0; или visibility: hidden; . У нас появится элемент и теперь будет проходить валидация, но настоящий чекбокс будет рядом и сообщение будет выдаваться с края. Чтобы решить и эту проблемы я воспользовался абсолютным позиционированием и теперь сообщение выскакивает ровно там, где я поставил настоящий чекбокс.
Вот что получилось:

HTML разметка:
<form class="form-contact"> <span class="datarel"> <input name="data" id="data" type="checkbox" class="hidden" required> <label for="data">Я согласен на обработку персональных данных</label> </span> <button class="button form__submit" type="submit">Нажать</button> </form>
CSS код:
.button { font-size: 14px; line-height: 16px; letter-spacing: 0.05em; display: block; text-align: center; text-decoration: none; text-transform: uppercase; color: #FFFFFF; border: 1px solid #FFFFFF; border-radius: 5px; padding-left: 10px; padding-right: 10px; padding-top: 14px; padding-bottom: 14px; min-height: 45px; background-color: transparent; margin: 20px auto 0; } .form-contact{ background-color: rgb(174, 174, 236); width: 400px; padding: 20px; margin: 0 auto; } input[type=checkbox]{ opacity: 0; } input[type=checkbox] + label:before { display: inline-block; content: "\2713"; height: 20px; width: 20px; color: transparent; border: 1px solid rgb(250, 247, 247); margin: -5px 10px 0 0; text-align: center; transition: color ease .2s; } input[type=checkbox]:checked + label:before { color: white; } input[type=checkbox] { width: 0px; } #data { margin: 0 auto; width: 1px; height: 16px; border: 1px solid #FFFFFF; background: none; position: absolute; top: 5px; left: 10px; } .datarel { position: relative; }