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

Question

我想弄清楚如何为border-bottom中的每一行添加<textarea>行，但我只能获得最底行＃{1}}去做这个。

有没有办法实现这个目标？

＆＃13;

＆＃13;

border-bottom

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

我在底层使用了伪元素，因为:before和:after不适用于textarea，因此我将其设置在容器{{1}上元素。

对于底线，我只使用下划线div，_换行，您可以根据需要使用多个行\A。每行的高度将根据字体大小自动更新。

<强> Jsfiddle Example

＆＃13;

＆＃13;

\A

＆＃13;

.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;  
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

JSFiddle

textarea
{ 
  line-height: 25px;
  background-image: linear-gradient(transparent, transparent 24px, #E7EFF8 0px);
  background-size: 100% 25px;
}

Answer 3

如何为＆lt; textarea＆gt;

中的所有文字加下划线

您的问题是，您希望border-bottom 中的每一行都有 <textarea>行，因此我的回答可能无法完全满足您的需求。如果它对您或其他人有用，我会发布它。

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。今天早上，这个想法突然出现在我身上：在textarea中使用SVG背景并没有在Javascript的帮助下滚动，但我敢打赌它会用DIV滚动得很好。瞧！

＆＃13;

＆＃13;

#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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;