用 CSS 模仿纸质表格 [关闭]答案

【问题标题】：Imitate Paper Form with CSS [closed]用 CSS 模仿纸质表格 [关闭]
【发布时间】：2013-05-15 00:44:18
【问题描述】：

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

这样的，

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

【问题讨论】：

是的，有一种方法可以做到这一点，但您不能简单地描述您想要什么并期望社区为您完成工作。向我们表明您已努力为此编写代码，我们将根据您的需要提供帮助。

标签： javascript jquery html css user-experience

【解决方案1】：

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

jsFiddle.

【讨论】：

只是将其冲洗掉：背景图像将是盒子图案。图像可以是一个带有重复 x 的 C 形框。等宽字体在每个字母上具有相同的字符宽度（否则普通字体具有不同的宽度；例如“i”与“M”）。字母间距将帮助您微调字母之间的间距以适合您的背景图像。实验将更改背景图像以完美契合！祝你好运！
将背景调整为字体宽度可能会很麻烦，除非您知道确切的字体指标。你能保证它们是跨浏览器和跨机器一致的吗？
@JanDvorak 我认为 Courier 是安全的，并且以像素定义应该是安全的。不过，你永远不知道。

【解决方案2】：

您可以使用图像中的 25 来代替一个输入字段！ :D

【讨论】：

... 和大量的编码。好主意（我也想过），但我更喜欢 Alex 的解决方案 ;-)（没有投票）
我也更喜欢其他解决方案，但这个解决方案实际上就是那些纸质解决方案的工作原理；当你想到它时，这有点愚蠢。他们是谁说我写一封信应该占用多少空间？
想一想，将背景调整为字体宽度可能会变得混乱。你的只是相当多的编码。 +1
听起来你更像是一个程序员而不是 Photoshop。如果我 2 天前没有生孩子，我会主动提供帮助制作 bg 图像。为设计师提供精美的咖啡，他们会为您做任何事情；）
您仍然假设每台机器和浏览器上的字体指标都是相同的。它们不是一般的，我不认为它们是任何等宽字体的情况。

【解决方案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);

【讨论】：