Impossibile impostare la larghezza textarea con i CSS

Question

ho tentato di usare questo CSS per impostare la larghezza dei miei elementi del modulo:

input[type="text"], textarea { width:250px; } 

Se si guarda a questo Firefox screenshot vedrete che i campi non sono stessa larghezza. Ottengo un effetto simile in Safari.

alt text http://screamingv.com/ss.png

Esistono soluzioni alternative?

AGGIORNAMENTO: Grazie per le informazioni finora. Ora mi sono assicurato che padding/margin/border su entrambi gli elementi siano impostati allo stesso modo. Stavo ancora avendo il problema. Il CSS originale che ho postato è stato semplificato ... Stavo anche impostando l'altezza della textarea a 200px. Quando rimuovo lo stile di altezza, le larghezze corrispondono. Strano. Non ha senso.

Bug del browser?

Answer 1

Provare a rimuovere padding e bordi. Oppure provare a fare loro la stessa per entrambi gli elementi

input[type="text"], 
textarea { 
    width:250px; 
    padding: 3px; 
    border: none; 
    } 

Oppure:

input[type="text"], 
textarea { 
    width:250px; 
    padding: 0; 
    border: 1px solid #ccc; 
    } 

INPUT e TEXTAREA elementi hanno spesso un po 'di imbottitura applicata dal browser (varia dal browser) e questo può far apparire le cose in modo efficace più ampia rispetto alla larghezza assegnata.

AGGIORNAMENTO: anche box-sizing: border-box; è un modo pratico per impostare le larghezze in cui verranno inseriti il ​​riempimento e il bordo anziché aggiungere. Vedere: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Answer 2

Forse hai un utente sovrapposizione specifica CSS definita da qualche parte nel tuo browser, perché ho appena provato e funziona come previsto: (.? Testato su Windows Forse Apple widget nativi hanno un qualche vezzo) http://jsbin.com/exase/edit

Answer 3

Try border: 0; o bordo: 1px solido # 000;

Answer 4

Questo è probabilmente causato da diversi margini di default sugli elementi <input> e <textarea>. Prova a usare qualcosa di simile.

input[type="text"], textarea { 
    padding: 0; 
    margin: 0; 
    width:250px; 
} 

Answer 5

Questa risposta è di tre anni di ritardo, ma sto postando qui solo nel caso in cui qualcun altro sta cercando di impostare la larghezza in em's e non pixels e si imbatte in questo post (come ho appena fatto). Assicurati che la dimensione del font sia la stessa,

ad es.

input, textarea { 
    font-size:12px; 
    width:20em; 
    padding:0; 
    margin:0 
} 

altrimenti la textarea può avere una dimensione diversa (true su FF12).

Answer 6

Anche io stavo lottando con questo tipo di problema, e questa domanda era il primo risultato del mio googling. Ciò che alla fine ha funzionato per me era impostare box-sizing: content-box per la textarea - Drupal 7 lo imposta su border-box, il che fa sottrarre il padding e la larghezza del bordo dalla dimensione della textarea.

Answer 7

Set larghezza 100% e quindi utilizzare max-width:

 textarea { 
      width:100%; 
      max-width:250px; 
    } 

// margine rimosso e imbottitura, è possibile aggiungere, se si vuole.