Le specifiche CSS non definiscono il layout e le regole da applicare agli elementi dei form, cosicchè ciascun browser applica i propri algoritmi. Centrare il testo dell'elemento legend con i CSS richiede purtroppo l'inserimento di marcatura aggiuntiva all'interno di tale elemento per poterne contenere il testo ed applicarvi la centratura. Fortunatamente tale marcatura, assolutamente superflua, può essere aggiunta tramite JavaScript. Vediamo questa soluzione.
Abbiamo un form di questo tipo, con la marcatura aggiuntiva già inserita nell'elemento legend:
<form action="" method="post">
<fieldset>
<legend><span>Test</span></legend>
<div class="checkbox-container">
<input type="checkbox" id="check1" name="check1" />
<input type="checkbox" id="check2" name="check2" />
</div>
</fieldset>
</form>
Quindi applichiamo i seguenti stili CSS:
form {
margin: 0;
padding: 0;
height: 100%;
}
fieldset {
margin: 0;
padding: 0;
border: 1px dashed #000;
border-width: 0 0 1px 0;
}
legend {
margin: 0;
padding: 0;
text-align: center !important;
display: block !important;
width: 100%;
}
legend span {
background: #fff;
position: relative;
top: 0.7em;
padding: 0 0.5em;
}
.checkbox-container {
border-top: 1px dashed;
width: 100%;
}
Gli stili rilevanti sono i seguenti:
fieldset {
margin: 0;
padding: 0;
border: 1px dashed #000;
border-width: 0 0 1px 0;
}
legend {
margin: 0;
padding: 0;
text-align: center !important;
display: block !important;
width: 100%;
}
legend span {
background: #fff;
position: relative;
top: 0.7em;
padding: 0 0.5em;
}
L'elemento legend è stato trasformato in un elemento di blocco esplicitamente e il testo al suo interno è stato centrato. Abbiamo dovuto usare la direttiva !important per essere sicuri di sovrascrivere il foglio di stile del browser. L'elemento aggiuntivo è stato posizionato relativamente e gli è stato associato un colore di sfondo in modo da creare l'effetto dell'allineamento verticale e del posizionamento del testo all'interno del bordo.
Potete visionare questa soluzione in questa pagina.