Jak ustawić dolną krawędź dla każdego wiersza w obszarze tekstowym?

Question

Próbuję dowiedzieć się, jak dodać linię border-bottom dla każdego wiersza w ramach <textarea>, ale jestem w stanie uzyskać tylko najniższy rząd border-bottom, aby to zrobić.

Czy istnieje sposób, aby to osiągnąć?

.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

Jak podkreślają cały tekst w <textarea>

Twoje pytanie mówi chcesz border-bottom wiersz dla każdego wiersza w <textarea>, więc moja odpowiedź nie może dokładnie Poznaj swoje zachcianki. Opublikuję go na wypadek, gdyby był przydatny dla ciebie lub innych osób.

textarea { text-decoration: underline; }

<textarea></textarea>

jsFiddle

wyjściowe próbki:

Answer 2

Idea jest użycie warstwy, aby textarea jako górnej warstwy wielokrotne linie jako dolna warstwa.

Używam element pseudo na dolnej warstwie, ponieważ :before i :after nie działa na textarea, więc mogę ustawić go na pojemniku div elementu.

Dla dolnych linii, po prostu używam podkreśleń _, z \A dla linii podziału, możesz mieć tyle linii, ile potrzeba, z numerem \A. Wysokość każdej linii zostanie automatycznie zaktualizowana zgodnie z rozmiarem czcionki.

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

Można użyć gradientu jako obraz tła, aby uzyskać efekt, który wygląda jak dolna:

JSFiddle

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

Answer 4

Wszystko, bez wewnętrznego wypełnienia.

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

zeszłym tygodniu dowiedzieliśmy się o contenteditable. Dziś rano ta myśl nagle przyszła do mnie: Używanie tła SVG w textarea nie przewija się bez pomocy Javascript, ale założę się, że przewijałoby się dobrze z DIV. Voila!

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