Il testo non inizia dalla parte superiore sinistra del campo di testo di input

Question

Ho un campo di immissione con un'altezza fissa. Il testo è centrato verticalmente, ma lo voglio nella parte in alto a sinistra dell'input.

CSS

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

HTML

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

Ecco un jsFiddle che illustra il problema>http://jsfiddle.net/9cR5j/

Answer 1

se quello che di rimuovere padding: 0.4em; e impostare

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

Dopo aver fatto cambiare il nome cambio di classe qui

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

invece di longInput sarà wideInput

---

Aggiornamento

JsFiddle demo with TextArea

questo funzionerà con textarea solo perché di ingresso è solo permettere il valore in una linea cioè non entrare keyallowed o doent disporre il testo lungo, è sufficiente aggiungere i dati in una sola riga

Answer 2

tuo imbottitura sta causando il testo per iniziare 0.4em dal lato sinistro. Se si desidera che il testo sia realmente allineato a sinistra, rimuovere il padding a sinistra:

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

Answer 3

Invece di input perché non provare textarea?

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

Aggiungerà il testo dall'angolo in alto a sinistra.

Answer 4

Per allineare sinistra e in alto si dovrebbe impostare un'altezza più piccolo e un padding-bottom:

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

Answer 5

Prova a impostare la proprietà line-height CSS sul campo input per lo stesso del height di quel campo.

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