Javascript 用CSS模拟纸质表单

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

像这样的,

---

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

应该是可能的。使用单空格字体，并结合

背景

、

行高

和

字母间距

CSS属性。实验

---

.

您可以使用图像中的25，而不是一个输入字段！：D

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

---

是的，有办法做到这一点，但你不能简单地描述你想要什么，并期望社区为你做工作。向我们展示一个迹象，表明您已经努力为此编写代码，我们将根据您的需要提供帮助。。。。还有很多编码。好主意（我也想到了），但我更喜欢亚历克斯的解决方案；-）（没有投反对票）我也更喜欢另一种解决方案，但这种解决方案实际上就是那些纸面解决方案的工作原理；想想看，这有点傻。他们是谁说我写一封信应该占用多少空间？想想看，把背景调成字体宽度可能会弄得一团糟。你的只是一个相当多的编码+1听起来你更像一个编码员而不是一个Photoshopper。如果我不是两天前刚生了个孩子，我会主动提出帮忙处理bg图像。为设计师提供一杯精美的咖啡，他们几乎可以为你做任何事；）您仍然假设每台机器和浏览器上的字体度量都是相同的。它们不是一般的，我也不认为在任何单空格字体中都是这样的。更简单地说，背景图像就是长方体图案。图像可以是一个带有重复x的C形框。单空格字体在每个字母上具有相同的字符宽度（否则普通字体具有不同的宽度；例如“i”与“M”）。字母间距将帮助您微调字母之间的间距，以适合您的背景图像。实验将改变背景图像，使其完全适合！祝你好运将背景调整为字体宽度可能会变得混乱，除非您知道确切的字体度量。你能保证它们在跨浏览器和跨机器上的一致性吗？@JanDvorak我认为Courier是安全的，以像素定义应该是安全的。但你永远不知道。

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

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