输入字段中的划线

Question

我正在尝试使用笔记本样式的统治条目创建一个input字段。怎么办呢。

这就是我想要的样子：

Answer 1

你可以使用CSS3 repeating-linear-gradient，它就像一个普通的linear-gradient，但是无休止的重复很容易。

使用此选项可在textarea上生成渐变背景，并使用硬的单像素颜色停止，以获得您希望它具有的规则颜色。

示例：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

在上面的示例中..

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

..使渐变从上到下，使用透明颜色作为起点，然后以26像素透明结束。然后它使用27px的蓝色作为硬色停止。此27px等同于line-height使用的textarea，以便整齐地排列规则中的文字。

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

删除border和outline，使其看起来像笔记本规则表。