@Tigronix

Как правильно сверстать инпут для заполнения карты?

Приветствую!
Гляньте скриншот, чтобы понимать о чем речь. Это инпут для ввода карты оплаты.
В моем понимании это должен один инпут потому что в него нужно много чего забить, например:
<input type="text" id="card__number" class="form-card__input form-card__input--number" placeholder="XXXX XXXX XXXX XXXX" pattern="[0-9]{14,23}" required autofocus autocomplete="cc-number" name="cardnumber">

Но исходя из этого дизайна я немного смущен. Не делать же там 4 инпута? Я думаю нет.
А если нет, то как сделать один инпут, но с таким же дизайном, как на скриншоте?
Единственное, что мне приходит в голову это абсолютами в нужных местах сделать промежутки, но честно говоря эта идея выглядит бредовой.
Буду благодарен если поделитесь своими мыслями.
  • Вопрос задан
  • 2124 просмотра
Решения вопроса 1
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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