Styling a fieldset at legend

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Styling a fieldset at legend

Post 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?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

I apologize I asked my question in an unclear way. What I'm really looking for is rounded fieldsets (corners)
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

Fieldset's are just block level elements, just like div's. Therefore any method for accomplishing rounded corners should work with fieldsets...
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

:-D Thanks!
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

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