Приветствую!
Гляньте
скриншот, чтобы понимать о чем речь. Это инпут для ввода карты оплаты.
В моем понимании это должен один инпут потому что в него нужно много чего забить, например:
<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 инпута? Я думаю нет.
А если нет, то как сделать один инпут, но с таким же дизайном, как на скриншоте?
Единственное, что мне приходит в голову это абсолютами в нужных местах сделать промежутки, но честно говоря эта идея выглядит бредовой.
Буду благодарен если поделитесь своими мыслями.