How to set a bottom border for every row in a textarea?

Question

I am trying to figure out how to add a border-bottom line for every row within a <textarea>, however I am only able to get the very bottom row's border-bottom to do this.

Is there a way to accomplish this?

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

If I make it have a background-image, it will size weird with smaller screens. There isn't another way to do this? — Becky, Jan 15 '16 at 02:45
You can use media queries to change the background-size property and have the background image scale as you desire for different viewports. Also, your classname seems very contradictory. — nabrown, Jan 15 '16 at 02:48
Possible duplicate of [Textarea with lines under each row of text](http://stackoverflow.com/questions/20071043/textarea-with-lines-under-each-row-of-text) — , Jan 15 '16 at 03:00

Ofir A. · Answer 1 · 2019-08-23T10:54:45.830

12

You can use gradient as the background image to get an effect that looks like underline:

JSFiddle

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

edited Aug 23 '19 at 10:54

answered Jan 15 '16 at 03:32

Ofir A.

350
2
10

1

I'd take this a step further and use `ch` units which is the height of the 0 character. Then you can adjust the font-size and everything will still work. – Donnie D'Amato Jan 16 '16 at 15:43
1

This is a modern solution and fully css implemented (no repeated background image, etc.) and it should be the accepted answer! – loretoparisi Nov 04 '20 at 20:00

Stickers · Answer 2 · 2016-01-16T20:10:09.613

The idea is to use layers, make the textarea as top layer, the multiple lines as bottom layer.

I'm using a pseudo element for the bottom layer, since :before and :after does not work on a textarea, so I set it on the container div element.

For the bottom lines, I simply use underscores _, with \A for a line break, you can have as many lines as needed with a number of \A. The height of each line will get updated automatically according to the font size.

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>

I tried this and I can't get it to work. I adapted it to my code somewhat. I don't know what I am doing wrong... https://jsfiddle.net/LyadLn5t/#&togetherjs=zFJxkJ1jrI — Becky, Jan 16 '16 at 07:40
I updated the answer with a better approach. The fiddle in your comment is almost empty by the way, maybe you pasted a wrong link. — Stickers, Jan 17 '16 at 00:01

score 3 · Answer 3 · answered Jan 30 '17 at 16:01

Last week I found out about contenteditable. This morning, this thought suddenly came to me: Using an SVG background in a textarea doesn't scroll without the help of Javascript, but I bet it would scroll just fine with a 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>

score 1 · Answer 4 · answered Feb 27 '16 at 09:21

Everything, minus the internal padding.

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

Michael Benjamin · Answer 5 · 2016-03-29T03:16:40.530

0

How to underline all text in a <textarea>

Your question says you want a border-bottom line for every row within a <textarea>, so my answer may not exactly meet your needs. I'll post it in case it's useful to you or others.

textarea { text-decoration: underline; }

<textarea></textarea>

jsFiddle

Sample output:

edited Mar 29 '16 at 03:16

answered Jan 15 '16 at 03:13

Michael Benjamin

346,931
104
581
701

He is not asking for underline for text he is asking line for every row in textarea. – artuc Apr 23 '20 at 08:11
That's already factored into my answer. Please read the first paragraph. @artuc – Michael Benjamin May 01 '20 at 15:14

How to set a bottom border for every row in a textarea?

5 Answers5

How to underline all text in a <textarea>

jsFiddle