CODEWITHSUNDEEP
htmlcssforms
joshiy390
joshiy390

Reputation: 33

How do I align text to the top in a resized <input type="text>?

My code is currently <input type="text" style="height:100px;" placeholder="Content" required>. The result that I get is a textbox with text in the middle. Is there a way to put the text on top?

Upvotes: 3

Views: 815

Answers (2)

Talha Akbar
Talha Akbar

Reputation: 10040

The input content is always rendered in the middle. If you really want an input with text that stays in the top, consider using textarea and use resize: none CSS property to prevent users from resizing it. The textarea is content is aligned to the top unlike input when the height of the textarea is large i.e. 100px.

Note: Textarea allows multi-line content so, you would need JavaScript to prevent the addition of multiple lines into the textarea. Perhaps, see Disable New Line in Textarea when Pressed ENTER

Upvotes: 3

Shafeeque
Shafeeque

Reputation: 563

@joshiy390 I think you need Textarea instead of Input tag here <textarea style="height:100px;" placeholder="Content"></textarea>. using Textarea have it's own advantages for such requirements.

Upvotes: 1

Related Questions