Напрямую так делать нельзя, поэтому:
1. Ты можешь прятать input, посылать с помощью JS в него то, что ты вводишь и активацию тоже, а вместо него пользователю показывать, например, span, который уже стилизуешь, как надо. Это не костыль если что, а абсолютно нормальное решение для кастомного ввода, а именно ты его и хочешь.
2. Либо использовать псевдоэлемент, который будет иметь градиент с заливкой и прерыванием там, где по маске дефис, и абсолютное позиционирование. Это уже костыль, но довольно простой, тебе всего-лишь надо по изменению инпута пересчитывать количество символов и от него формировать ширину полоски с градиентом.
3. Или прямо фон инпута заливать. Как-то
так.. Опять же, надо будет считать фон динамически, чтобы было совпадение пропусков и подчеркиваний.
4. Использовать несколько стилизованных инпутов, каждый подчеркнуть, а по достижению (в кейсе 3х символов) переключаться на следующий, так можно их оформлять отдельно, хоть и немного геморройно.
