CODEWITHSUNDEEP
cssinput
Sergey Scopin
Sergey Scopin

Reputation: 2245

Positioning of text inside input

I have an input with height: 250px as you can see in it's text is in center. Is there any way to place align it to top left corner? 

#messageBox
{
    width: 200px;
	height: 250px;
}
<input id="messageBox">

Upvotes: 3

Views: 24723

Answers (9)

Danield
Danield

Reputation: 125463

Add bottom padding with box-sizing (so that the padding doesn't increase the height of the input):

#messageBox
{
  width: 200px;
  height: 250px;
  padding-bottom: 222px;
  box-sizing: border-box;
}
<input id="messageBox" />

Upvotes: 4

maťo
maťo

Reputation: 1302

Or if you need input and you don't need more rows, you can use padding instead height.

For example this code, but it's look crazy:

#messageBox {
  width: 200px;
  padding: 0 0 250px 0;
}
<input id="messageBox" value="test">

Upvotes: 6

Mooseman
Mooseman

Reputation: 18891

Use a <textarea> instead:

#messageBox{
    width: 200px;
    height: 250px;
}
<textarea id="messageBox"></textarea>

Upvotes: 11

Marc Audet
Marc Audet

Reputation: 46785

Maybe add padding and let the height auto compute.

I assume that you know about textarea.

However, if you want the single line input field to have a tall box for design purposes, it can be done.

Design Note: This styling allows you to place a background image below the text input area without having to add extra mark-up, which may be useful at times.

#messageBox
{
  width: 200px;
  padding-bottom: 250px; /* approximately... */
  background:  0 30px no-repeat url(http://placekitten.com/1000/500);
}
<input id="messageBox" value="Test">

Upvotes: 1

YayCoding
YayCoding

Reputation: 55

As the comments say, change <input> to <textarea>

#messageBox {
  resize: none;
}
<textarea id="messageBox" rows="6" cols="50">

To increase height, just add more to rows

Upvotes: 0

Igbanam
Igbanam

Reputation: 6082

You can use the <textarea> element to achieve this.

Upvotes: 0

Mat Richardson
Mat Richardson

Reputation: 3606

You should use the textarea element instead.

<textarea id="messageBox"></textarea>

http://jsfiddle.net/16sb2rnb/5/

Upvotes: 0

Kiran Shinde
Kiran Shinde

Reputation: 5982

html

<textarea id="messageBox"></textarea>

css

#messageBox
{
width: 200px;
height: 250px;
resize:none
}

http://jsfiddle.net/16sb2rnb/3/

Upvotes: 0

Vinod VT
Vinod VT

Reputation: 7149

Change the HTML as,

<textarea id="messageBox"></textarea>

Use textarea instead of invalid input

Upvotes: 0

Related Questions