Is there an easy way to have an HTML <textarea> alternate its row colors to improve editing?

I don't mind if the solution is pure CSS or if it requires JavaScript.

Is there an easy way to have an HTML <textarea> alternate its row colors to improve editing?

I don't mind if the solution is pure CSS or if it requires JavaScript.

• javascript
• html
• css
• textarea

• Not a textarea, but maybe look into HTML5's ContentEditable attribute: html5demos./contenteditable – DA. Commented Oct 13, 2011 at 0:30

3 Answers 3

textarea {
  background-image: linear-gradient(#F1F1F1 50%, #F9F9F9 50%);
  background-size: 100% 4rem;
  border: 1px solid #CCC;
  width: 100%;
  height: 400px;
  line-height: 2rem;
  margin: 0 auto;
  padding: 4px 8px;
}

Found this on codepen. Working for me.

If I understand correctly that you want the colors alternating WITHIN the textarea (as in each line)?

I would suggest the easiest method is to use a background image in your textarea's and have the rows of the alternate colors the same height as the font-size/line-height to create the illusion of alternate rows, then just repeat the background image.

Additional Solution

However, it seems that using that method, the background doesn't scroll along with each line.

The best technique I can e up with is to use a jQuery plugin called 'autoResize' by James Padolsey. What this does is removes the scrollbars and as your text nears the bottom of the textarea, the textarea height is increased accordingly.

Now, that can cause problems since you could potentially have VERY long textareas depending on how much text the user writes but I've created a fix for this.

What we can do is wrap the textarea in a div and set the overflow-y (vertical) to scroll and the overflow-x (horizontal) to hidden. What this does is now give us a "fake" scrollbar on our textarea, creating the illusion that it's scrollable so our background now appears as if it scrolls up and down with the text too.

You will have to adjust the width/height/margins/borders/paddings etc accordingly and maybe check for cross browser patibility, but this should help set you on the right track and get you going.

Here is a link to an example I have created using the above method:

http://jsfiddle/HelloJoe/DmPLH/

CSS supports an nth child syntax now. Check out the MDN docs for an example of changing the background-color of only every other list item inside an unordered list:

HTML:

<p>NBA players with most championships:</p>
<ul>
    <li>Bill Russell</li>
    <li>Sam Jones</li>
    <li>Tom Heinsohn</li>
    <li>K. C. Jones</li>
    <li>Satch Sanders</li>
    <li>John Havlicek</li>
    <li>Jim Loscutoff</li>
    <li>Frank Ramsey</li>
    <li>Robert Horry</li>
</ul>

CSS:

li:nth-child(even) {
    background-color: lightyellow;
}

RESULT:

An example of making every other line in a textarea a different color by using CSS' nth-child syntax

SOURCE:

https://developer.mozilla/en-US/docs/Web/CSS/:nth-child