html - 输入字段中的格线

Question

我正在尝试制作一个带有笔记本风格的规则条目的 input 字段。如何做到这一点。

这是我想要的样子:

Answer 1

您可以使用 CSS3 repeating-linear-gradient，它与常规 linear-gradient 类似，但可以轻松实现无休止的重复。

使用它在 textarea 上生成渐变背景，并为您希望它具有的规则颜色设置硬单像素色标。

例子:

label, textarea {
  font-family: sans-serif;
  font-size: 15px; line-height: 27px;
  padding: 0px 5px; margin: 8px; 
}
label { font-weight: bold; }
textarea {
  border: none; outline: none;
  background: repeating-linear-gradient(
    to bottom, transparent, transparent 26px, #33d 27px
  );
  background-attachment: local;
}

<label>General Business Information</label><br/><br/>
<textarea rows="8" cols="50">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</textarea>

在上面的例子中..

repeating-linear-gradient(to bottom, transparent, transparent 26px, #33d 27px)

..使渐变从上到下，使用透明颜色作为起点，然后在 26 像素处以透明结束。然后它在 27px 处使用蓝色作为硬色标。此 27px 等于用于 textarea 的 line-height 以便在规则内整齐地对齐文本。

background-attachment: local; - 如果 textarea 有滚动条，背景会随着内容一起滚动。

移除 border 和 outline，完成后它看起来像一个笔记本的方格纸。