How can I add line numbers to a textarea using an ordered list?-CodePudding

I have a textarea, and I want line numbers made from an ordered list to be to the left of it and to have them correspond with the scrolling and CSS of the textarea.

Here is the HTML code:

#objtext{
  position:absolute;
  top:0;
  left:0;
  width:30%;
  height:70%;
  background-color:#eeeeee44;
}

#linenumbersdiv{
  color:brown;
  font-family: "Lucida Grande",Verdana;
  position: absolute;
  top:0;
  left:0;
  width:40px;
  height:70%;
  background-color:lime;
  margin-left:-10px;
  padding:0px;
  overflow-y:scroll;
  margin-top:0;
  margin-bottom:0;
  padding-left:0;
  
}


#linenumberslist{
  font-size:10px;
  display:block;
  margin-top:0;
  margin-bottom:0;
  margin-left:0;
  margin-right:0;
}

<div id="linenumbersdiv">
      <ol id="linenumberslist">
        <li id="theone">this could be individually colored!</li>
        <li>ahh</li>
        <li>AHHHH</li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ol>
    </div>
    <textarea id="objtext"></textarea>

I can't figure out the CSS to make the ordered list elements line up with the default CSS of the textarea. Once I figure out that, I can probably figure out the rest using some code I once made to make a chat go to the bottom on each new message.

I also want to be able to maintain the ability to color the text of an individual line number, so that ruled out another textarea, and I also don't want to use jQuery or any other plugins.

This link doesn't help me, when I look at the CSS of the textarea and the ordered list, and then try to make them the same from there, it doesn't work. https://www.w3schools.com/cssref/css_default_values.asp

The question: Is there a way to reproduce the CSS of a textarea into an ordered list such that the lines line up?

CodePudding user response：

It's important to set the margin and paddingof both textarea and the ol to 0. Because font properties are not inherited by textarea, you need to set them to inherit.

.container{
        position: relative; 
        margin: 20px;
        font-family:"Lucida Console", Monaco, monospace;
        font-size: 100%;
        line-height: 120%;
    }
    .container .list {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        width: 25px;
        background-color: green;    
    }
    .container .list ol {
        margin: 0;
        padding: 0;
        list-style-position: inside;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
    }
    .container .list ol li{
        padding-left:5px;   
    }
    .container .textarea {
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
    }
    .container .textarea textarea {     
        width:300px;
        height: 200px;
        margin: 0;
        padding: 0 0 0 30px;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
        border: 1px solid black;
        
    }

<div class="container">
    <div class="list">
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <div class="textarea">
        <textarea></textarea>
    </div>
</div>