Perché Chrome ignora l'attributo "dimensione" dell'input di testo?

Question

Il seguente attributo di dimensione non ha alcun effetto. Perché?

<input type="text" size="80" placeholder="blablabla bla lba bla bla bla blabla bla bla bla lba"> 

E 'inadempiente a 60 caratteri e non c'è apparentemente nulla che possa fare per cambiare la situazione.

Answer 1

Presumibilmente, alcuni stili lo influenzano. Senza regole di stile, è works just fine. Ma quando si applica una regola di stile con una dimensione più piccola, that takes precedence.

Per capire quale sia la regola di stile che lo riguarda, fare clic con il tasto destro del mouse e scegliere "Ispeziona elemento", quindi guardare le informazioni sullo stile mostrate a destra.

Answer 2

Utilizzare un elemento textarea al posto dell'elemento input:

<textarea cols="80" rows="1" style="overflow: visible" placeholder= 
"blablabla bla lba bla bla bla blabla bla bla bla lba"></textarea> 

Questo produce più costante, anche se il rendering non del tutto coerente. L'impostazione overflow: visible è lì per fare in modo che IE abbia spazio per 80 caratteri, altrimenti solo 79 si adatta, a causa della barra di scorrimento verticale.

Perché il problema sembra con input:

L'attributo size="80" imposta la larghezza visibile del campo alla larghezza “medio” di 80 caratteri. Questo non è esattamente definito (quale "media"?), Ei browser lo implementano anche in modo illogico: l'uso di size="80" tende a dare una larghezza notevolmente inferiore a 4 volte la larghezza predefinita di 20 caratteri. Quindi il browser non è nemmeno coerente. La proporzione dipende dal tipo di carattere e dal browser. (Questo accade su altri browser come bene.)

Se è necessario continuare a utilizzare input:

Si potrebbe usare style="width: 80ch", ma non tutti i browser supportano questa funzionalità CSS3, e non v'è alcuna garanzia che è stato implementato propriamente. L'unità ch è per definizione la larghezza di avanzamento della cifra zero, '0', che nella maggior parte dei caratteri è uguale alla larghezza di avanzamento delle cifre in generale. (Ad esempio, Firefox implementa quasi correttamente questo quasi, ma non del tutto.)

È possibile impostare il font negli elementi <input> in un font monospace. Questo non rimuove il problema, ma rende le larghezze più vicine alle larghezze specificate.

Answer 3

A partire da Goggle Chrome 26 su Mac OS Lion, l'unità "ch" non è supportata. Su un elemento ispezionato con lo stile "larghezza: 16ch", lo stile è contrassegnato come "Valore proprietà non valido". Altre unità comuni (pt, px, em,%) sono accettate correttamente.

Answer 4

Se vi state chiedendo il motivo per cui si può entrare 60 caratteri, la proprietà che determina che il numero di caratteri è chiamato maxlength:

Maxlength

Se il valore della l'attributo type è text, email, search, password, tel o url, questo attributo specifica il numero massimo di caratteri (in punti codice Unicode) che l'utente può inserire; per altri tipi di controllo, viene ignorato. Può superare il valore dell'attributo dimensione. Se non è specificato, l'utente può inserire un numero illimitato di caratteri.Specificando un numero negativo si ottiene il comportamento predefinito; cioè, l'utente può inserire un numero illimitato di caratteri. Il vincolo viene valutato solo quando il valore dell'attributo è stato modificato.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

Size determina solo la larghezza in caratteri, non gli utenti ammontare può entrare.

Answer 5

Ho avuto lo stesso problema e dopo aver provato molte altre soluzioni, ho risolto questo problema aggiungendo una larghezza ai campi di input.

input { 
    width:90px; /* Your width may vary */ 
}