用CSS模仿纸质表格

Question

有没有办法可以用CSS绘制输入框，它具有纸质链接网格框的背景。

像这样，

当用户输入数据时，光标从一个框移动到下一个框。

Answer 1

应该可以。使用等宽字体，并结合background，line-height和letter-spacing CSS属性。实验！

jsFiddle

Answer 2

而不是一个输入字段，你可以像图像一样使用25！ ：d

Answer 3

尝试使用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);