Set the width 100% of the tag "legend" in FF

Question

Is it possible to set the width of the tag "legend" at 100% in FF? In spite of all my efforts its length stays equal to the containing text.

Answer 1

set css width on fieldset

fieldset { width: 100%; }

Answer 2

I don't believe it is, no. Firefox 3.5 sets the following style on legends:

width: -moz-fit-content !important;

which, thanks to the ‘important’, is impossible to override (min-width and position are similarly affected).

display defaults to inline, but you can set it to block and nest a <span> inside it which you can then set to display: block; width: something;. But not 100% as that relies on the width of the legend (gah). The only way I can think of to truly get 100% would be to relative-position the fieldset and absolute-position the span inside the legend with left: 0; width: 100%;.

(Which is very ugly and potentially fragile.)

<legend> is always a tricky element to style in many browsers: its typical default rendering can't be done with plain CSS, so the browsers cheat in various ways that can bite you if you try to change the rendering too much. If you want to control the positioning of the element that specifically, you are probably better off forgetting <legend> and just using a styled <div>.

Answer 3

works on all browsers:

LEGEND { position: relative; width: 100% }

edit- check out this gem: http://www.456bereastreet.com/lab/styling-form-controls-revisited/legend/