CSS: guida al layout degli elementi dei form

Una guida sintetica per risolvere i problemi più comuni nel layout degli elementi dei form con i CSS.

Gli sviluppatori spesso sono frustrati dal fatto che non riescono a dare agli elementi dei form gli stili CSS in modo che risultino compatibili con tutti i browser. Il problema deriva dal fatto che le specifiche CSS non definiscono affatto come dovrebbero apparire gli elementi dei form, ma si limitano a specificare che elementi come input e textarea sono di tipo inline-block. In questo articolo vorrei descrivere alcune tecniche da me usate per gestire questo problema.

Dimensioni e altezza

Usare height su elementi come input e select non produce gli effetti desiderati, poichè i browser esagerano spesso i valori specificati. Una soluzione è quella di specificare un tipo di font sugli elementi e dimensionarli a partire dalla dimensione dei font. Ricordate che i browser usano font diversi sui form, quindi dovete specificarli esplicitamente:

Attenzione al padding: tutti i browser applicano già questa proprietà ad alcuni elementi dei form, quindi la prima cosa da fare è normalizzare questa proprietà:

Fieldset e legend

fieldset e legend sono già forniti di abbondanti stili predefiniti che provengono dal foglio di stile predefinito dei browser. Il problema maggiore di questi elementi è che sono legati tra di loro, quindi gli stili dell’uno influenzano l’altro. Per esempio, applicando questi stili a fieldset:

In alcuni casi potete usare la regola !important se vedete che i vostri stili non sovrascrivono quelli dei browser.

Immagini di sfondo

Per applicare più facilmente le immagini di sfondo ad elementi come i campi di testo e le aree di testo dovete trasformare questi elementi in elementi di blocco:

In Internet Explorer 8 ed inferiori non è possibile assegnare immagini di sfondo agli elementi label. Dovete pertanto racchiudere questi elementi in elementi span e applicare gli stili a questi ultimi.

Input di tipo file

Si potrebbe facilmente assegnare un’immagine di sfondo al contenitore di questi elementi e quindi usare la proprietà CSS3 opacity sugli input per nasconderli. Una soluzione cross-browser è stata trovata in questo articolo. Se invece usate jQuery, la soluzione potrebbe essere la seguente:

E nel CSS:

In questo caso dovete giocare con le dimensioni dell’input, perchè alcuni browser tenderanno ad ignorare le dichiarazioni di larghezza ed altezza specificate e a rappresentare questo elemento in modo diverso per quanto riguarda le dimensioni.

Allineamento

Per impostazione predefinita, molti elementi dei form sono di tipo inline-block. Se non cambiate il loro ruolo predefinito, potete usare la proprietà vertical-align per allinearli verticalmente:

Se questi elementi sono preceduti da altri elementi inline come label, dovete usare la stessa proprietà CSS su questi elementi:

Con il floating invece uso il posizionamento relativo e la proprietà top specificando valori in em:

Un caso tipico è quando avete una struttura del genere:

ossia quando il campo è preceduto da un elemento testuale. Gli em ci permettono di far scalare l’allineamento dei campi a seconda della dimensione del font in uso sulla pagina, mantenendo un rapporto costante.