输入字段中的格线

debugcn 发表于 Dev

布普林德·库马尔

我正在尝试input使用规则条目的笔记本样式制作一个字段。如何才能做到这一点。

这是我想要的样子：

Abhitalks

您可以使用 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与line-height用于的相等，textarea以便整齐地对齐规则内的文本。

background-attachment: local;- 如果textarea获取滚动条，则使背景与内容一起滚动。

删除border和outline，完成它看起来像一个笔记本格子表。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。