javascript - 如何为文本区域中的每一行设置底部边框？

Question

我想知道如何添加 border-bottom <textarea> 中每一行的行，但是我只能得到最下面一行的 border-bottom去做这个。

有没有办法做到这一点？

.input-borderless {
  width: 80%;
  border-top: 0px;
  border-bottom: 1px solid green;
  border-right: 0px;
  border-left: 0px;
  background-color: rgb(241,250,247);
  text-decoration: none;
  outline: none;
  display: block;
  padding: 10px 0;
  margin: 20px 0;
  font-size: 1.6em;
}

<textarea rows="3" class="input-borderless" placeholder="Describe the project"></textarea>

Answer 1

您可以使用渐变作为背景图像来获得看起来像下划线的效果:

JSFiddle

textarea
{
  line-height: 4ch;
  background-image: linear-gradient(transparent, transparent calc(4ch - 1px), #E7EFF8 0px);
  background-size: 100% 4ch;
}