Как разбить input на заданное число ячеек как в кроссворде?
 

Можно ли средствами CSS визуально представить поле input type="text" как набор квадратов, по типу как это сделано в кроссворде? Чтобы поле input было одно, но пользователь видел, что он может ввести только определенное количество букв. И соответственно, чтобы введённые буквы визуально попадали в эти квадраты.

Ну теоритически чисто на css можно:

<input type="text" value="слово" maxlength="9">
<style>
input{
    background-image: repeating-linear-gradient(90deg, #000, #000 1px, transparent 1px, transparent 31px);
    font: 20px Consolas, monotype;
    letter-spacing: 20px;
    padding: 5px 10px;
    margin:0;
    width: 311px; 
    border: none;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
</style>

Но с кучей оговорок.)

А чем плох вариант с несколькими инпатами?
(как это делается на различных сайтах, допустим "Приват Банк", что бы войти тебе нужно ввести цифры с паролем, там несколько инпатов и по мере набора они перепрыгивают в следующие).

Или действительно на подобии как представлено выше, просто делаешь большой отступ между буквами и делаешь бекграунд на определенное количество кусков.