输入字段中的划线

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等于line-height用于textarea整齐地对齐规则内的文本.

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

删除border并outline完成它看起来像笔记本规则表.