Altezza degli input di testo: una soluzione CSS

Spesso, quando andiamo a dare un'altezza a degli input di testo tramite la proprietà  height, otteniamo dei risultati insoddisfacenti. Questo avviene perché in effetti l'altezza dei campi di testo è strettamente dipendente dal tipo di font in uso sul campo di testo e dalla sua dimensione.

Di default i browser non assegnano lo stesso font in uso sul documento ai campi di testo, ma ciascuno tende ad utilizzare un proprio font con una propria dimensione. Occorre quindi settare esplicitamente font-family e font-size per i campi di testo.

Ho raccolto vari test su questa pagina che riassumono in breve i vari risultati ottenibili a seconda del tipo di font e dimensione usato. Per esempio, il primo campo di testo non ha nessuna dichiarazione e viene rappresentato in modo diverso rispetto a tutti gli altri. Ovviamente per ottenere l'effetto desiderato si può anche omettere qualsiasi dichiarazione, anche se in questo caso tutto viene affidato al capriccio dei browser.

Quindi, se vogliamo ottenere un buon controllo sull'altezza degli input di testo, occorre utilizzare esplicitamente un dato tipo di font ad una data dimensione. Inoltre, ricordiamo che anche altre proprietà  influenzano tale altezza, come per esempio il padding.