Så positionerar du legend-elementet i formulär

• 2008-12-29
• 4 kommentarer
• CSS, HTML

Att positionera legend-elementet korrekt i ett formulär och få det att se likadant ut i alla webbläsare är omöjligt. Ett sätt att lösa problemet är att lägga in ett nytt element inuti legend-elementet och positionera det nya elementet - exempelvis en <span>:

<fieldset>
	<legend><span>Registrera dig</span></legend>
	...
</fieldset>

Med hjälp av CSS kan du sedan använda position-egenskapen för att positionera span-elementet:

fieldset { position: relative }

legend span {
	position: absolute;
	top: -16px;
	left: 0
}

Om du inte tycker om den extra markup:en så kan du använda JavaScript för att lägga in det extra span-elementet. Du kan även skippa <legend> helt och hållet och i stället använda dig av en vanlig rubrik, exempelvis <h2>.

Mitt twitter-konto