Text doesn't start from the left top of input text field

Question

I have an input field with a fixed height. The text is vertically centered, but I want it at the top left of the input.

CSS

.wideInput{
    text-ali         


        

Answer 1

Instead of input why you not try textarea ?

<textarea class="longInput" cols="30" rows="10"></textarea>

It will add text from left top corner.

Answer 2

if what that than remove padding: 0.4em; and set

padding-left:0;
padding-top:0;
padding-bottom:0.4em;
padding-right: 0.4em;

After doing change change class name here

<input class="wideInput" value="<?php echo $row['foodPrice']; ?>" />

instead of longInput it will be wideInput

---

Update

JsFiddle demo with TextArea

this will work with textarea only because input is just allow to enter value in one line i.e no enter keyallowed or it doent wrap long text , it just add data in one line

Answer 3

To align left and top you would have to set a smaller height and a padding-bottom:

text-align: left;
padding:  0.4em;
padding-bottom:190px;
width: 400px;
height: 10px;

Answer 4

Try setting the line-height CSS property on the input field to the same as the height of that field.

height:200px; line-height:200px;

Answer 5

Your padding is causing the text to begin 0.4em from the left hand side. If you want the text to be truly left-aligned, remove the padding on the left:

.wideInput{
    text-align: left;
    padding: 0.4em 0.4em 0.4em 0;
    width: 400px;
    height: 200px;
}

Answer 6

As Pranay Rana said, your padding is causing the problem and his answer is correct. Additionally you can use shortcut propery for padding:

padding: 0 0.4rem 0.4rem 0;

This is the same as:

padding-left:0;
padding-top:0;
padding-bottom:0.4em;
padding-right: 0.4em;

It takes the values in clockwise order, so first top, right, bottom and then left. And if you want the text to be on multiple lines, use textarea instead of regular input[type=text].