Normally, when I create an unordered list in HTML, it will align the bullet point to the top of the text. If I put an input element inside the li element, then it will align in the middle. This is all fine, except that when I add a text area element it aligns towards the bottom of it. Here's an example:
<ul>
<li>Bullet is at <br/>the top</li>
<li><input type="text" value="Bullet is centered" /></li>
<li><textarea placeholder="Bullet is too low" ></textarea></li>
</ul>
The above code looks like this in Firefox v60.0:
I'm creating a WYSIWYG editor for a specific application. It is mostly finished and the last thing I need to do is get the bullet point behind the textarea to go to the top rather then the bottom.
So far I've tried changing vertical-align to center, baseline, and top to the li element in the unordered list with no success. I have also changed the list-style-position to inside and outside. My searches for anyone else who encountered this problem haven't turned anything either. The only thing I can think might work, would be positioning the li elements relatively and then adding an absolutely positioned bullet point image, but I'd prefer that to be a last resort.
Does anyone have any ideas? I need a solution that only uses HTML, CSS, and not sure why you'd need it, but Javascript is okay (not JQuery). It only needs to work in later Firefox versions. Cross-browser compatibility is not needed at all.
Try setting your textarea to display: block
textarea {
display: block;
}<ul>
<li>Bullet is at <br/>the top</li>
<li><input type="text" value="Bullet is centered" /></li>
<li><textarea placeholder="Bullet is too low" ></textarea></li>
</ul>