Make first line of textarea be on same position as bullet in list-item

Question

I have <ul> list.

For every li I've modify bullets style:

ul {
    list-style: none;
}

ul li:before{
    content: "\2022";
    font-size: 170%;
    margin-left: -16px;
}

And my list looks like :

<ul>
    <li>
        <textarea name="txtBullet1" rows="2" cols="70" id="txtBullet1" tabindex="20" onkeyup="maxLen(this);" required="required" style="width:100%;"></textarea>
    </li>
</ul>

But textArea is upper than my bullet. I've tried padding and margin to move it lower, but doesn't help

Answer 1

You can use vertical-align:middle; with textarea and bullet

 ul { list-style: none; } ul li:before{ content: "\\2022"; font-size: 170%; margin-left: -16px; vertical-align:middle; } textarea { padding:0; vertical-align:middle; } 

 <ul> <li> <textarea name="txtBullet1" rows="2" cols="70" id="txtBullet1" tabindex="20" onkeyup="maxLen(this);" required="required" style="width:100%;"></textarea> </li> </ul>