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-align: left;
    padding:  0.4em;
    width: 400px;
    height: 200px;
}

HTML

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

Here's a jsFiddle that demonstrates the problem > http://jsfiddle.net/9cR5j/

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