What is the best way to add a bottom border to each row in a textarea?

Question

What is the best way to add a bottom border to each row in a textarea?

I am currently exploring methods to include a border-bottom line for each row in a <textarea>, but so far I have only been able to achieve this on the very bottom row.

Is there any way to make this happen?

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

javascript jquery html css

Answer 1

Answer №1

If you want to create an underline effect using gradient as the background image, you can follow these steps:

Code Snippet

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

Answer 2

If you want to create an underline effect using gradient as the background image, you can follow these steps:

Code Snippet

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

Answer 3

Answer №2

One technique is to utilize layers, with the textarea as the top layer and the multiple lines as the bottom layer.

To achieve this, a pseudo element is used for the bottom layer because :before and :after do not function on a textarea. Therefore, it is applied to the containing div element.

The bottom lines are created using underscores _, along with \A for line breaks. This allows for any number of lines to be added by including additional \A. The height of each line adjusts automatically based on the font size.

Check out this 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 4

One technique is to utilize layers, with the textarea as the top layer and the multiple lines as the bottom layer.

To achieve this, a pseudo element is used for the bottom layer because :before and :after do not function on a textarea. Therefore, it is applied to the containing div element.

The bottom lines are created using underscores _, along with \A for line breaks. This allows for any number of lines to be added by including additional \A. The height of each line adjusts automatically based on the font size.

Check out this 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 5

Answer №3

Just last week, I came across the amazing feature of contenteditable. And this morning, a brilliant idea struck me - why not use an SVG background in a textarea for smooth scrolling? I tested it out and, lo and behold, it worked like a charm with a DIV element. Genius!

#container {
  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="container"><div contenteditable="true" id="paper">I am experimenting with creating a border-bottom line for each row within a box, but so far only the very bottom row's border appears to be visible.</div></div>

Answer 6

Just last week, I came across the amazing feature of contenteditable. And this morning, a brilliant idea struck me - why not use an SVG background in a textarea for smooth scrolling? I tested it out and, lo and behold, it worked like a charm with a DIV element. Genius!

#container {
  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="container"><div contenteditable="true" id="paper">I am experimenting with creating a border-bottom line for each row within a box, but so far only the very bottom row's border appears to be visible.</div></div>

Answer 7

Answer №4

Everything except for the internal padding is included.

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

Everything except for the internal padding is included.

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

Answer №5

How to add an underline effect to all text within a <textarea>

Your query indicates you are looking for a way to create a border-bottom line for each row in a <textarea>. While my response may not align perfectly with your specific requirements, I am sharing it as it could still be valuable to you or other individuals.

textarea { text-decoration: underline; }

<textarea></textarea>

View the Code on jsFiddle

Here is a glimpse of what the result might look like:

https://i.sstatic.net/C6tBF.png

Answer 10

How to add an underline effect to all text within a <textarea>

Your query indicates you are looking for a way to create a border-bottom line for each row in a <textarea>. While my response may not align perfectly with your specific requirements, I am sharing it as it could still be valuable to you or other individuals.

textarea { text-decoration: underline; }

<textarea></textarea>

View the Code on jsFiddle

Here is a glimpse of what the result might look like:

https://i.sstatic.net/C6tBF.png

What is the best way to add a bottom border to each row in a textarea?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

How to add an underline effect to all text within a <textarea>

View the Code on jsFiddle

Similar questions

Utilizing jQuery to dynamically pass parameters to the YouTube API

Encountered a parse error while attempting to retrieve JSON data through AJAX in Drupal

Fetching JSON data using Javascript/JQuery

Received extra keys from getStaticPaths in NextJs

Generate pre-set components using fundamental building blocks

Trigger the dimming effect on the webpage when HTML5 video starts playing

Issue with tile size or alignment in Safari

Find a particular image across various pages using Jquery and AJAX

Having difficulty in converting JSON objects into key/value pairs in Angular 7

What could be causing the data to be displaying as undefined when using AJAX

downsides of scrolling text functionality

Phonegap app: The function in the AngularJS controller is only executed when called twice

Adding data from a database into an object in PHP for temporary use during the loading process can be achieved by following

The AngularJS Input Validation TypeError occurs when attempting to use an undefined function for validation

Sometimes I receive a notification that the session ID cannot be regenerated because the session is not active, without any apparent cause

When attempting to execute the 'npm start' command, an error was encountered stating "start" script is

The value of the <select> form is not being submitted properly once the options are dynamically loaded via ajax

Converting a multipart form data string into JSON format

Typescript versus ES5: A comparison of Node.js server-side applications written in different languages

Storing translations in localStorage on my website to avoid repeatedly loading them each time I revisit the page