Coloring lines inside textarea

Question

Is there any way to make textarea display lines in colors? What I am trying to achieve is every second line colored, i.e. white,grey,white,grey,white,grey... for better readability. Users are supposed to write in lots of stuff, as in "enter names, each one from new line".

I do use jQuery anyway so if they made some simpler solution for this it would be perfect.

Answer 1

One way to accomplish this would be to just use a background in the textarea.

<style type="text/css"> 
  textarea { background-image: url(bg.png); }
</style>

That being said, you'd have to have to play around with the tiling and the line-height to get it just right, but it should be able to accomplish what you're looking for without the use of scripting.

Answer 2

If you wanted to make the actual text different colors, there's no way to do this using a pure <textarea>. You could use a rich text editor such as TinyMCE, but that would be way too overkill in my opinion.

Answer 3

What you are looking for is called Zebra striping, maybe that will help with some google searching. However, I don't think there is a way to currently do this to text within a textarea (besides using the background image hack).

CSS3 has a lot of powerful features such as the nth-child psuedo class. There might be a way to do it using that, but again, it probably has no way to do that within a text area.

Perhaps another solution would be to do something like SO does -- where you enter text into a textarea and then next to it or below it it shows a nicely formatted version. You would use jquery to parse the text in real time and display it zebra striped.

Edit: I had another idea that might work, but would take some experimenting. There is probably a way using jquery to get the absolute position of each line of text in the text area. I would think you could at least get the absolute position of the top left of the textarea, get the line height of the text, multiply by the number of rows down (number of linebreaks in the text), test and tweak a little, and you should be able to get the position of each line in the text area. Then, use jquery to draw a colored div behind the text area for each line of text that is as wide as the textarea and as tall as the line of text. The textarea should be transparent as well.

With a little more work, you can probably even have the zebra striping logic be smart enough to detect if the line of text has wrapped, so that zebra stripe can be 2 or more lines tall.

Might work. Good luck!