Vertical align on text input

[XaviJr]

Here’s the code:

<p>Observations:</p><input class="obs" type="text" name="obs" />

And I have height:100px to .obs.

The problem is that when i try to write some text it appears on the middle (vertically) of the text area.

I tried vertical-align:top but it doesn’t changed anything. Any solution?

[Tcooper]

An input type="text" is just a single line input field, it’s working as it should – are you sure you don’t want to use a textarea?

<textarea class="obs" name="obs"></textarea>

[Dreamdealer]

What you could do is add height to the field by using padding. Lets say the line height is 15 pixels, set the padding to something like “padding: 5px 5px 80px 5px;” to get a total height of 100 pixels.

Not sure why you would like to something and I also guess your actually looking for a textarea, but this would be the solution i would use.

[XaviJr]

Yes, what i needed was a textarea. Thank you guys!

[Cristishor201]

How you maneged to align it on the middle ? :D

I want to make my search bar text inputs to be vertically align …

[Shikkediel]

Little chance of a response to a five-year-old topic, maybe you could start a new one with some minimal code to show what you’re after?

codepen.io/anon/pen/ObYWNJ

Default is vertically aligned in the middle already…

[Cristishor201]

Thank’s Shikkediel :)

I manage to change the width and height for the input itself at css file, and now the appearance it’s much better ! :)

[Author]

Posts