Либо div contenteditable true
Либо вниз псевдик от кого-нибудь с фоновыми клетками (гридом), например, от лейбла. Если лейбл со спаном с visually-hidden, то фон можно прямо лейблу.
Ankhena, ок, спасибо. Нно в сафари сейчас символы не по середине клетки. Тоесть в сафари сейчас впринципе по другому выглядит. Есть предположение, как исправить?
Сделайте подложку с клетками под input-ом, сам input - прозрачный. Так вы сможете задать отдельно ширину подложки и отдельно ширину input-а.
Из-за того, что letter-spacing делает отступ строго справа от символа, вы никогда не сможете приладить к ним центрированные элементы фона для каждого символа в том же теге.
Нет. 1 input на все 8 символов с z-index таким, чтобы под него можно было подсунуть div с клетками с меньшим z-index-ом.
При этом, можно будет задавать независимо ширину этих двух элементов.
Простой