Form input textarea vertical-align not working

Question

I'm struggling to get inputted text to align with the top of an input textarea, on an HTML form, and have searched forums extensively, so I thought I'd post here.

I've tried using:

textarea{
vertical-align:top;}

and

input["textarea"]{
vertical-align:top;}

I've also tried adding autoflow:auto;

@Paul Please explain more what you're trying to achieve and share a fiddle of what you have done so far. — Lokesh Suthar, Feb 26 '14 at 21:36

score 3 · Answer 1 · edited May 23 '17 at 11:54

3

I think you are wanting to use a <textarea> instead of an <input>. Here's some background for you too, but you use different form elements for different things.

HTML

<input type="text" placeholder="input" value="input">
<br />
<textarea rows="10">Textarea that has text aligned to the top. No css needed</textarea>

Demo Here

edited May 23 '17 at 11:54

Community

1
1

answered Feb 26 '14 at 21:36

dlane

1,131
7
7

2

How can you tell this is what op is trying to ask? – Kody Feb 26 '14 at 21:38
My best guess by his CSS selection `input[type="textarea"]`. – dlane Feb 26 '14 at 21:42
that's exactly what it is - can't believe you just answered this so quickly, thanks so much – Paul Till Feb 26 '14 at 22:26
I don't now how he could tell, but it's what I was trying to ask too. For some reason, ` ` wouldn't word wrap and vertically centered the text, ignoring the rows attribute and the wrap attribute. Changing to `` solved the problem. Old post, but problem seems up to date. – BobRodes May 23 '16 at 20:39

score 1 · Answer 2 · answered Feb 26 '14 at 22:09

Im not sure what your issue is but I will try and give an answer to what I believe is your problem :)

When you do like this:

<form>
    <textarea cols="25" rows="5" required>

    </textarea>
</form>

The spaces between your textarea is already rendered when you run the code - this means that when you wanna type in the textarea there is 100 different places you can begin texting.

I think what you wanna do is this:

<form>
    <textarea cols="25" rows="5" required></textarea>
</form>

This way the texting in the textarea will begin in the top-left corner of the textarea, that is because you have not rendered any lines when you run this code.

DEMO of the two Versions: http://jsfiddle.net/2thMQ/4/

Form input textarea vertical-align not working

2 Answers2