Jag bloggar numera på http://blog.dileno.com ».

Prenumerera på RSS

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>.

Kommentarer

Tjenare!

Snygg lösning! Har du kanske något knep på lager om hur man sätter en bakgrundsfärg på ett fieldset-objekt lyssnar jag gärna!

När jag provat det så ser det bra ut i Firefox (färgen hamnar inom ramen), men i IE så smetar bakgrundsfägen utanför ovanför legenden.

Hej Tor och tack!

Har du någon CSS-kod du kan visa, för både fieldset och legend?

Tjena! Strippade koden lite till nedanstående.

I FF ser det snyggt ut med texten innanför 'ramen', men i IE8 gräddar bakgrundfärgen ut sig.

<form method="" action="">
<fieldset style="background-color:#F75;">
<legend>Rubrik</legend>
<label for="headline">Input 1</label><br>
<input type="text" id="headline" name="headline">
</fieldset
</form>

Grym match i söndags förresten ;D

Testa detta i en IE-specifik stilmall:

fieldset { background-color: #f75; border: 0; position: relative }
legend { position: absolute; top: -1em }

Så här länkar du in en IE-specifik stilmall:

<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css" media="screen,projection" /><![endif]-->

Till sidhuvudet

Clicky Web Analytics