Какое адекватно решение создания кастомного чекбокса с ссылкой внутри label?

Сам mdn не рекомендует пихать ссылки в label
А у меня кастомный чекбокс вида:

<label for="checkbox">
  <input type="checkbox" name="checkbox">
  <p>
    Lorem, ipsum dolor. 
    <a href="">Policy</a>
    Lorem, ipsum dolor.
  </p>
</label>

Я попытался сделать как то так:
<div class="main-form__checkbox form-checkbox">
  <label class="form-checkbox__label">
    <input class="form-checkbox__checkbox hidden" type="checkbox" name="checkbox"/><span class="form-checkbox__fake-checkbox"></span>
    <p>TEXT TEXT</p>
  </label><a class="form-checkbox__policy-link" href="">LINK</a>
  <label class="form-checkbox__label" for="checkbox">TEXT TEXT</label>
</div>

Но мне кажется это слишком мусорно.

В общем задача сделать текст кликабельым и активирующим чекбокс и внутри чтобы еще была ссылка.
(Как минимум на мобильно сафари первый вариант вообще не будет адекватно работать)
  • Вопрос задан
  • 394 просмотра
Пригласить эксперта
Ответы на вопрос 2
profesor08
@profesor08 Куратор тега CSS
1. В label не должно быть блочных элементов
2. В label не должно быть ссылок

В приведенном коде нарушаются оба пункта. Надо сделать так, чтоб в label не было подобных элементов.

Вывод: надо обновить требования, чтоб они соответствовали возможностям и спецификации HTML. Если потребуется доработать дизайн.
Ответ написан
@tihomirovPro
Frontend developer
Можно сделать так:

<div class="checkbox">
  <input type="checkbox" id="checkbox" class="checkbox__input">
  <label for="checkbox" class="checkbox__label"></label>
  <p class="checkbox__text">Lorem ipsum <a href="#">policy</a> aspernatur minima.</p>
</div>

Лейблу задаешь абсолютную позицию и растягиваешь на весь блок, а ссылке релатив и z-index выше чем у лейбла

Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы