Как установить нижнюю границу для каждой строки в текстовом поле?

Я пытаюсь выяснить, как добавить строку 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>

Ответ 1

Идея состоит в том, чтобы использовать слои, сделать textarea как верхний слой, а несколько строк - нижним.

Я использую псевдоэлемент для нижнего слоя, так как :before и :after не работают с textarea, поэтому я устанавливаю его в элементе container div.

Для нижних строк я просто использую символы подчеркивания _, при \A для разрыва строки вы можете иметь столько строк, сколько необходимо, с числом \A. Высота каждой строки будет автоматически обновляться в соответствии с размером шрифта.

Пример Jsfiddle

.container {
  width: 200px;
  border: 1px solid green;
  position: relative;
  overflow: hidden;
}
.container:before, .container textarea {
  font-family: sans-serif;
  font-size: 20px;
}
.container textarea {
  width: 100%;
  box-sizing: border-box;
  background-color: transparent;
  border: 0;
  outline: none;
  display: block;
  line-height: 1.2;
}
.container:before {
  position: absolute;
  content: "____________________\A____________________";
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  color: silver;
  line-height: 1.4;  
}

<div class="container">
  <textarea rows="3" placeholder="Hello"></textarea>
</div>

Ответ 2

Вы можете использовать градиент в качестве фонового изображения, чтобы получить эффект, который выглядит как подчеркивание:

JSFiddle

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

Ответ 3

Как подчеркнуть весь текст в <textarea>

В вашем вопросе говорится, что вам нужна строка border-bottom для каждой строки в <textarea>, поэтому мой ответ может не соответствовать вашим потребностям. Я отправлю его на случай, если он будет полезен вам или другим.

textarea { text-decoration: underline; }

<textarea></textarea>

Ответ 4

Все, минус внутренняя прокладка.

$(document).ready(function() {
  $('textarea.styleme').scroll(function(event) {
    $(this).css({'background-position': '0 -' + $(this).scrollTop() + 'px'})
  })
})

textarea.styleme {
  width: 80%;
  border: 0px;
  /*background-color: rgba(241,250,247, .5);
  background-image: url('https://placehold.it/350x100');*/
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 20'%3E%3Crect id='background' height='20' width='10' y='0' x='0' fill='%23f1faf7'/%3E %3Cline id='underline' y2='20' x2='0' y1='20' x1='10' stroke='%23008000' fill='none'/%3E %3C/svg%3E");
  background-size: 10px 20px;
  background-repeat: repeat;
  background-position: 0 0;
  text-decoration: none;
  outline: none;
  display: block;
  /*padding: 10px 0;*/
  margin: 20px 0;
  font-size: 1.6em;
  line-height: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea spellcheck="false" class="styleme" placeholder="Describe the project" rows="5">Vestibulum vel sem porttitor, suscipit odio sit amet, egestas arcu. Nam varius felis eu ligula pellentesque vestibulum. Pellentesque tempor, nisi sit amet fringilla consequat, ex erat malesuada dui, non dapibus nunc felis laoreet nibh. Maecenas elementum commodo enim quis hendrerit. Ut sit amet malesuada dui. Praesent dolor purus, mollis vel venenatis eget, malesuada sed nulla. Sed at dolor lobortis, malesuada tortor ut, ultrices enim. Nullam posuere dolor massa. Nullam dignissim, dolor at tempus sagittis, massa eros semper quam, a posuere massa massa et neque. Praesent finibus massa eu interdum auctor. Vestibulum id risus massa.</textarea>

Ответ 5

На прошлой неделе я узнал о contenteditable. Сегодня утром эта мысль внезапно пришла ко мне: использование SVG-фона в текстовом поле не прокручивается без помощи Javascript, но я уверен, что он будет прокручиваться с помощью DIV. Вуаля!

#wrapper {
  display: inline-block;
  width: 10em;
  height: 4em;
  border: 1px solid gray;
  overflow: auto;
}
#paper {
  min-height: 4em;
  line-height: 1em;
  vertical-align: bottom;
  background-size: 1px 1em;
  background-repeat: repeat;
  background-position: 0 0;  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1em'%3E%3Crect id='background' height='1em' width='1' y='0' x='0' fill='%23f1faf7'/%3E %3Cline id='underline' y2='1em' x2='0' y1='1em' x1='1' stroke='%23008000' fill='none'/%3E %3C/svg%3E");
  /*for placeholder, see https://codepen.io/flesler/pen/AEIFc */
}

<textarea id="TA"></textarea>
<div id="wrapper"><div contenteditable="true" id="paper">I am trying to figure out how to add a border-bottom line for every row within a, however I am only able to get the very bottom row border-bottom to do this.</div></div>