Larghezza input e select diversa

**abellos** · 23-06-2022, 10:13

Ciao ho questo codice :

codice:

<input class="InputText" type="text" name="scatola" value="">
<select name="codSede">
<option value="-1">- - - - - -</option>
<option value="4">Banca sede</option>
<option value="5">Filiale xxxxx</option>
<option value="6">Filiale yyyyy</option>
</select>

e il css

codice:

SELECT {border: 1px solid #ffcc00; width: 150px; font-size: 9pt;}
.InputText {border: 1px solid #ffcc00; background-color: #ffffff; width: 150px; font-size: 9pt; font-family: verdana; }

dovrebbero essere larghi uguali ma l'input box e' di 6 pixel piï¿½ lungo rispetto alla select (controllo con l'inspect di edge), quando non avevo inserito la direttiva <!DOCTYPE html> erano uguali.
Puï¿½ essere il font family che mi da questo problema?
Ho validato la pagina e ho corretto tutti gli errori segnalati, non riesco a capire perchï¿½ non sono uguali -.-

**Dascos** · 23-06-2022, 11:25

Beh, prova a levare la famiglia font dalla classe InputTest oppure aggiungila alla select. E' il modo più semplice per capire se è quello (e secondo me lo è...specifichi un font solo per uno dei campi, l'altro userà quello di default del browser e potrebbe essere diverso in dimensione)

**abellos** · 23-06-2022, 11:41

ciao ho provato e la larghezza e' sempre differente, ho trovato che qualcosa mi aggiunge un padding ma non capisco che cosa, io nel mio foglio di stile non lo uso. allego le immagini di edge e firefox.
Per ora l'unica soluzione e' mettere come larghezza 144px agli input text

**Dascos** · 23-06-2022, 12:12

E' lo stile integrato del browser, praticamente, quindi ti conviene o farne un override nella tua dichiarazione del css, o aggiungere il medesimo padding all'altro elemento. Io ti consiglierei di fare un override

**abellos** · 23-06-2022, 13:36

va bene, grazie!

**KillerWorm** · 23-06-2022, 15:11

Ciao

Originariamente inviata da Dascos

E' lo stile integrato del browser
...

Direi che la causa del problema non sia esattamente questa, piuttosto è da ricercare nel famigerato "box model CSS".

In particolare la proprietà box-sizing con valore di default content-box che di norma esclude gli ingombri di padding e bordi dal calcolo delle dimensioni width e height. Va da sé che se i due elementi hanno padding e bordi differenti, la loro dimensione finale sarà differente.

In genere per risolvere il problema si usa il cosiddetto "box model css reset", che consiste in una o due regolette CSS. Ti invito a fare qualche ricerca.

La soluzione è abbastanza semplice, fai un fischio se non riesci a trovarla

Buon proseguimento.

**abellos** · 23-06-2022, 16:21

Perfetto KillerWorm!!!
mi e' bastato inserire box-sizing: border-box; nella classe inputText ed e' tornato tutto alla normalità.
Prima avevo provato a sovrascrivere il padding con padding: 0px 0px; ma si rimpiccioliva un pochino il campo di testo, con il tuo suggerimento e' della dimensione corretta.

Discussione: Larghezza input e select diversa

Strumenti discussione

Ricerca discussione

Visualizza

Larghezza input e select diversa

Permessi di invio