Cross Browser larghezza del campo di input stilizzazione

Ho una forma di ingresso di spedizione/fatturazione e sto avendo problemi styling i campi di input per essere la stessa larghezza ...Cross Browser larghezza del campo di input stilizzazione

Il problema:
-a campo <input type="text" size="X" /> sembra rendering con dimensioni diverse in browser diversi (vedere link).
-Inoltre, i campi selezionati sembrano essere visualizzati anche in modo diverso.
-Chrome/safari non sembrano rispondere alla proprietà di dimensione carattere per i campi selezionati.

Qualsiasi guida su come stilizzare le dimensioni di input di testo e selezionare campi cross-browser sarebbe davvero molto utile.

Devo risultare in un foglio diverso per ogni browser ... solo per questi campi di input? -thanks

fonte

2010-03-16 Derek Adair

Rimuovere l'attributo "dimensione" inline, in primo luogo. Si dovrebbe usare i CSS per lo stile del modulo di input:

input[type="text"] { 
    width: 100px; 

    /* You can also style padding, margins and everything else, 
    * just remember that inputs of type "text" can only be one line. 
    */ 
}

Non usare [type = "text"] come selettore. Lo stavo solo usando in questo esempio per associarmi ai campi di input di tipo "text", ma non è completamente supportato dal cross-browser. Dovresti dare ai tuoi campi di inserimento del testo la loro classe con cui stilizzare.

Inoltre, non dimenticare il ripristino dei dati CSS per assicurarsi che i margini, i bordi, ecc. al. vengono ripristinati per tutti i browser. http://meyerweb.com/eric/tools/css/reset/

fonte

2010-03-16 16:58:49 dclowd9901

In realtà, utilizzando il reset di eric meyer e lo styling della larghezza utilizzando css come spiegato, non tutti i campi di input hanno la stessa larghezza quando si confrontano webkit in IE7 -> IE9 –

Nella mia esperienza , loro sono le pause. Ci sono molte sciocchezze incoerenti con il modello di box, ad esempio: come adattare un campo di input al 100% della larghezza della sua casella genitore. Normalmente, otterresti questo risultato impostando la casella genitore al 100% della larghezza, quindi impostando i parametri margin o padding della casella interna, ma poiché i campi di input sono autonomi, non c'è modo di creare, in qualsiasi piattaforma, un modo legare coerentemente la larghezza di una casella di testo al suo contenitore genitore (non che l'altro metodo sia pulito o semantico). Idealmente, le caselle e i campi dovrebbero avere una definizione di Larghezza esterna. – dclowd9901

Questa risposta non fornisce un dimensionamento coerente delle caselle di input. Ha alcune informazioni preziose, ma non risponde alla domanda. – BishopZ

Al giorno d'oggi, è possibile normalizzare la larghezza degli ingressi "dimensionati", utilizzando l'unità ch, che ha raggiunto un discreto supporto browser.

Purtroppo, è ancora possibile scrivere:

input[size] { 
    width: attr(size) "ch"; 
}

Quindi dobbiamo per lo stile larghezze abbiamo sappiamo useremo:

input[size="10"] {width: 10ch;} 
input[size="20"] {width: 20ch;} 
input[size="30"] {width: 30ch;} 
/* etc. */

Questo può facilmente essere automatizzato usando un preprocessore CSS.

UPDATE:

ho fatto un test fiddle. Ad oggi (febbraio 2018), questo funziona su Windows 10 con Chrome 63, Edge 41, FF 58. Su IE 11, non riesce. Non ho provato su OS X.

fonte

2016-07-15 09:50:31 xfra35

"ch" non funziona correttamente per le dimensioni dell'input. Per esempio.con un font monospace, per ottenere una casella di input che mostra 30 caratteri, su IE devo impostare 37ch e su Chrome 33ch. Lo rende praticamente inutile secondo me. – user9645

Ho creato un [test fiddle] (https://jsfiddle.net/bujr1d94/1/). Su Windows 10, questo funziona con Chrome 63, Edge 41, FF 58. Su IE 11, fallisce. Non ho provato su OS X. – xfra35

Cross Browser larghezza del campo di input stilizzazione

risposta

Problemi correlati