html - html/html5のカスタマイズされた入力テキストボックス

Question

実際には、図に示すようなテキストボックスを実装したいと思います。

ユーザーが必要なスペースに番号を入力できるようにしたいと思います。背景が見えるように透明になることに注意してください。html5キャンバスを含むソリューションも良いでしょう。

それで、これを行うことは可能ですか？もしそうなら、どのように？

Answer 1

これまでに何を試しましたか？あなたはほとんどあなた自身の質問に答えました、入力が透明な背景を持つようにしてください。

input {
    border: 0;
    outline: 0;
    background: transparent;
    border-bottom: 2px solid black;
    width: 20px;
}

jsFiddle

Answer 2

<input>ボーダーは下側のみに設定してください。これがあなたの写真が示すように、デモです。