javascript - 用 CSS 模仿纸质表格

Question

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

像这样的东西，

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

Answer 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);

Answer 3

应该是可以的。使用等宽字体，结合background,line-height和letter-spacingCSS 属性。实验！

js小提琴。