如何为textarea中的每一行设置底部边框？

Question

我试图找出如何为<textarea>每一行添加border-bottom ，但是我只能得到最底行的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

想法是使用图层 ，将textarea作为顶层，将多行作为底层。

我正在底层使用伪元素，因为:before和:after对textarea不起作用，所以我将它设置在容器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> 

Answer 2

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

的jsfiddle

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

Answer 3

如何在<textarea>中为所有文本加下划线

你的问题是你想要<textarea>每一行的border-bottom ，所以我的答案可能不完全符合你的需要。 如果它对您或其他人有用，我会发布它。

 textarea { text-decoration: underline; } 

 <textarea></textarea> 

的jsfiddle

样本输出：

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

Answer 5

上周我发现了contenteditable 。 今天早上，这个想法突然出现在我身上：在没有Javascript帮助的情况下，在textarea中使用SVG背景不会滚动，但我敢打赌它可以用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>