如何爲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的>

你的問題說，你想一個border-bottom行的每一行一個<textarea>中的所有文本，所以我的回答可能不完全滿足您的需求。我會發布它，以防它對你或其他人有用。

textarea { text-decoration: underline; }

<textarea></textarea>

jsFiddle

示例輸出：

Answer 2

的想法是使用層，使textarea的作爲頂層，所述多條線作爲底層。

我使用僞元素的底層，因爲:before和:after在textarea是不行的，所以我將它設置在容器div元素。

對於底線，我簡單地使用下劃線_，使用\A作爲換行符，您可以使用數量爲\A的行數。每行的高度會根據字體大小自動更新。

Jsfiddle Example

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

您可以使用漸變作爲背景圖像獲取，看起來像下劃線效果：

JSFiddle

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

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>