Page 1 of 1

Styling a fieldset at legend

Posted: Thu Dec 14, 2006 2:06 pm
by Luke
I was just wondering if anybody has found a good way to style fieldsets and legends so that they look a little prettier. Maybe rounded edges for the fieldset... I guess that is the only thing I don't know how to do already... any ideas?

Posted: Thu Dec 14, 2006 2:51 pm
by matthijs
Fieldsets and legends ... well as far as I know you can style them any way you want (position, color, font, etc). Maybe you'll have to deal with some browser quirks here and there, but what's new.

A pretty simple but nice effect for input elements and textareas is setting a background image on them. For example a nice gradient/shadow-ish thing. That really gives your forms a finishing touch.

Posted: Thu Dec 14, 2006 2:57 pm
by Luke
I apologize I asked my question in an unclear way. What I'm really looking for is rounded fieldsets (corners)

Posted: Thu Dec 14, 2006 2:59 pm
by nickvd
Fieldset's are just block level elements, just like div's. Therefore any method for accomplishing rounded corners should work with fieldsets...

Posted: Thu Dec 14, 2006 3:05 pm
by Luke
:-D Thanks!

Posted: Thu Dec 14, 2006 3:37 pm
by matthijs
As you have a fieldset with in it a legend and both are block level as nickvd pointed out, you can use the technique of setting one large bg image on the fieldset for the bottom left+right corners and the a smaller bg image on the legend for the top left+right corners. Fixed width in that case, But allows the fieldset to scale vertically.