CSS: guida al layout degli elementi dei form

  • CSS
  • Gabriele Romanato
CSS: guida al layout degli elementi dei form

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:


body {
	font: 100% Arial, sans-serif;
}

input, select {
	font: 1em Arial, sans-serif;
}

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


input[type="submit"],
input[type="button"],
input[type="reset"] {

  padding: 0;

}

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:


fieldset {
	margin: 0;
	padding: 0;
	border: none;
}
[/css[

<p>vedrete che in alcuni browser <code>legend</code> ha perso la sua indentazione. La migliore cosa da fare è resettare gli stili di entrambi, e quindi applicare loro i nuovi stili singolarmente:</p>



fieldset, legend {
	margin: 0;
	padding: 0;
}

fieldset {
	border: none;
}

legend {
	display: inline;
	position: relative;
	left: 0.5em;
}




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:




input[type="submit"] {
	display: block;
	width: 120px;
	height: 30px;
	background: #444 url(btn.png) no-repeat;
	color: #fff;
	line-height: 30px;
	text-align: center;
	font: bold small Arial, sans-serif;
	border: none;
}




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:




<div class="file">
	<input type="file" name="file" id="file" />
</div>





$(':file').css('opacity', 0);




E nel CSS:




div.file {
	width: 120px;
	height: 40px;
	background: url(upload.png) no-repeat;
}

div.file input {
	display: block;
	width: 120px;
	height: 40px;
}




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:




input, select {
	vertical-align: middle;
}




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




label, input, select {
	vertical-align: middle;
}




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




input {
	float: left;
	width: 120px;
	position: relative;
	top: 0.3em;
}




Un caso tipico è quando avete una struttura del genere:




<dl>
  <dt><label for="email">E-mail</label></dt>
  <dd><input type="text" name="email" id="email" /></dd>
  <!-- si ripete -->
</dl>




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.

Ti potrebbe interessare anche