htmlcsstextarealine-height

CSS: textarea line-height match Line number line-height?

I have this textarea which I am using with this hack to get line numbers:

It's great however, I can't get the textarea's line-height, padding etc to match up with those same properties of the line-numbers.

You can see below after line 6 the lines start to shift.

This is my CSS:

textarea {
 background: url(http://i.imgur.com/2cOaJ.png);
 background-attachment: local;
 background-repeat: no-repeat;
 padding-top: .995em;
 border-color:#ccc;
 line-height:1.154em;
}

enter image description here

Is there any way they can changed to match the textarea's properties?

Thank you in advance!

Solution

  • I got this one to line up correctly in chrome. I don't advise using 12px as you font size but that is what it computes to.

    textarea {
  background: url(http://i.imgur.com/2cOaJ.png);
  background-attachment: local;
  background-repeat: no-repeat;
  border-color: #ccc;
  font-family: inherit;
  font-size: 12px;
  padding: .75rem 0 0 1.8rem;
  line-height: 1.4;
  overflow: auto;
  background-color: white;
}