我想知道如何在 <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>您可以使用渐变作为背景图像，以获得类似下划线的效果：
textarea
{
line-height: 4ch;
background-image: linear-gradient(transparent, transparent calc(4ch - 1px), #E7EFF8 0px);
background-size: 100% 4ch;
}
ch 单位，这是字符“0”的高度。然后你可以调整字体大小，一切都仍然有效。 - Donnie D'Amato上周我发现了 contenteditable。今天早上，我突然想到一个想法：在文本域中使用SVG背景没有JS的帮助是不能滚动的，但是我敢打赌，在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's border-bottom to do this.</div></div>所有内容，减去内部填充。
$(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>您的问题说您想要在<textarea>中每一行都有一个border-bottom线，因此我的答案可能不完全符合您的需求。我会发布它以防对您或其他人有用。
textarea { text-decoration: underline; }<textarea></textarea>示例输出：
