javascript - CSSで紙のフォームを模倣する

Question

紙のリンク グリッド ボックスの背景を持つ入力ボックスを CSS で描画する方法はありますか。

このようなもの、

ユーザーがデータを入力すると、カーソルが 1 つのボックスから次のボックスに移動します。

Answer 1

1 つの入力フィールドの代わりに、画像のように 25 を使用できます。:D

Answer 2

css で背景を作成し、モノタイプ フォントを選択してみてください。ここに短い解決策があります。

いくつかのCSS：

<link href='http://fonts.googleapis.com/css?family=Cutive+Mono' rel='stylesheet' type='text/css'>
<style>
input {
    /* background grid */
    background: white;
    background-image: -webkit-repeating-linear-gradient(left, 
        white 0px,      white 20px,     black 21px,     white 22px,
                        white 40px,     black 41px,     white 42px);
    border: 1px solid black; border-right: 0;

    /* magic width */
    width: 252px;

    /* font font font ... */
    font: normal 2em/1em 'Cutive Mono', serif;
    letter-spacing: 2px;

    /* not really important */
    padding: 0; margin: 0;
    -webkit-appearance: none;
    outline: none;
}
</style>

そしていくつかのhtml

<input type="text" value="hallo welt"/>

// 編集: 繰り返し線形グラデーションについては、caniuse.com ( http://caniuse.com/#feat=css-repeating-gradients ) を参照し、ベンダー タグなしで一般的なサポートを追加します。

    background-image: repeating-linear-gradient(left, 
        white 0px,      white 20px,     black 21px,     white 22px,
                        white 40px,     black 41px,     white 42px);