Создайте собственный чекбокс с эмодзи

Условие

Сделайте разметку и стилизацию пользовательского чекбокса, при этом вместо стандартной галочки внутри будет отображаться выбранный вами эмодзи. При необходимости можно переименовать переменные, но код‑блоки оставьте без изменений.

Ответ

Сохраните настоящий input type=checkbox для клавиатуры и семантики, а рядом покажите стилизованный индикатор с эмодзи.

<label class='emoji-check'>
  <input type='checkbox'>
  <span class='emoji-mark' aria-hidden='true'>🙂</span>
  Получать уведомления
</label>

.emoji-check { position: relative; display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.emoji-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.emoji-mark { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 1px solid currentColor; border-radius: .25rem; font-size: 0; }
.emoji-check input:checked + .emoji-mark { font-size: 1rem; background: #e7edf7; }
.emoji-check input:focus-visible + .emoji-mark { outline: 2px solid #3659b8; outline-offset: 3px; }

Label переключает input при клике, Space работает при фокусе. Не заменяйте checkbox обычным div без поведения и доступного имени.