Gli elementi dei form sono speciali quando si tratta di applicare degli stili CSS in modo da modificarne il layout predefinito. La loro particolarità consiste nel fatto che gran parte del loro aspetto viene controllato dal foglio di stile predefinito del browser. Di fatto tale foglio di stile è l'unico riferimento valido in mancanza di quei dettagli che non vengono forniti dalle specifiche CSS.
Consideriamo un form inline in cui tutti gli elementi sono elementi inline:
input[type="text"] {
width: 150px;
background: #fff;
color: #000;
border: 1px solid;
display: inline;
vertical-align: middle;
padding-right: 3px;
}
input[type="submit"] {
padding: 1px;
width: 4.5em;
font-weight: bold;
display: inline;
vertical-align: middle;
background: #fff;
color: #000;
border: 1px solid;
}
label {
display: inline;
vertical-align: middle;
padding-right: 3px;
font-weight: bold;
}
Se testate questo codice noterete un particolare sorprendente: i campi mantengono un'altezza ed una larghezza nonostante siano stati dichiarati come elementi inline. Per le specifiche CSS un elemento inline non può in alcun modo avere una larghezza in quanto il suo box model è determinato dai bordi, dai margini orizzontali, dal padding e dall'interlinea della riga corrente.
Di fatto questi elementi continuano a comportarsi come elementi di tipo inline-block nonostante la nostra esplicita dichiarazione.
In pratica esiste un conflitto tra gli stili predefiniti del browser ed i nostri stili autore.
Da un punto di vista delle specifiche CSS questo conflitto non dovrebbe esistere perché gli stili autore vincono sempre sugli stili predefiniti
del browser a meno che questi ultimi non usino dichiarazioni più specifiche (ad esempio usando !important o una proprietà CSS particolare
del browser).
In definitiva i browser hanno spesso l'ultima parola sul layout CSS degli elementi dei form e tocca agli autori (ossia agli sviluppatori) porre rimedio a questa situazione.