Så positionerar du legend-elementet i formulär
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>
.