Как решить проблему с прокруткой в инпуте?

Question

[frontAng]

Сейчас в инпуте можно делать скролл.
Была попытка в качестве решения задать overflow: hidden и white-space: nowrap - не помогли
https://jsbin.com/yohudicige/edit?html,css,output

Comments

[Ankhena]

Была попытка в качестве решения задать overflow: hidden и white-space: nowrap - не помогли

Не гневите CSS бога.

Answer 1

[Ankhena]

Либо div contenteditable true
Либо вниз псевдик от кого-нибудь с фоновыми клетками (гридом), например, от лейбла. Если лейбл со спаном с visually-hidden, то фон можно прямо лейблу.

Comments

[frontAng]

Ankhena, ок, спасибо. Нно в сафари сейчас символы не по середине клетки. Тоесть в сафари сейчас впринципе по другому выглядит. Есть предположение, как исправить?

Answer 2

[alexalexes]

Сделайте подложку с клетками под input-ом, сам input - прозрачный. Так вы сможете задать отдельно ширину подложки и отдельно ширину input-а.
Из-за того, что letter-spacing делает отступ строго справа от символа, вы никогда не сможете приладить к ним центрированные элементы фона для каждого символа в том же теге.

Comments

[frontAng]

alexalexes, тоесть нужно все же делать 8 или сколько нужно инпутов? Одним никак, верно?

[alexalexes]

Нет. 1 input на все 8 символов с z-index таким, чтобы под него можно было подсунуть div с клетками с меньшим z-index-ом.
При этом, можно будет задавать независимо ширину этих двух элементов.