Текст не начинается с левого верхнего края текстового поля ввода

Question

У меня есть поле ввода с фиксированной высотой. Текст вертикально центрирован, но я хочу его в левом верхнем углу ввода.

CSS

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

HTML

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

Вот jsFiddle, демонстрирующую проблема>http://jsfiddle.net/9cR5j/

Answer 1

, если то, что чем удалить padding: 0.4em; и установить

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

После этого изменения имени класса изменения здесь

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

вместо longInput будет wideInput

---

Update

JsFiddle demo with TextArea

это будет работать с текстовой только потому, что вход разрешен только чтобы ввести значение в одной строке, т.е. не вводить keyallowed или doent оберните длинный текст, он просто добавить данные в одной строке

Answer 2

Ваш обивка вызывает текст, чтобы начать 0.4em с левой стороны. Если вы хотите, чтобы текст был действительно по левому краю, удалите отступы слева:

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

Answer 3

Вместо input почему вы не попробуете textarea?

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

Будет добавлен текст из левого верхнего угла.

Answer 4

Для выравнивания левого и верхнее вы должны установить меньшую высоту и обивку-дно:

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

Answer 5

Попробуйте установить свойство line-height CSS на input поля так же, как height этого поле.

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