CODEWITHSUNDEEP
htmlcsslegendfieldset
Marko
Marko

Reputation: 72230

Default CSS values for a fieldset <legend>

I'm trying to use a <legend> as a title inside a <fieldset>.

In browsers other than IE, the <legend> is positioned on the top border of the <fieldset>, with the text perfectly centered on the line.

alt text

I'm trying to reset it's position so that it sits just like any other element. i.e. an <h3>.

Here's the CSS I have so far.

fieldset legend {
    margin: 0;
    padding: 0;
    position: static;
    border: 0;
    top: auto; left: auto;
    float: none;
    display: block;
    font-size: 14px;
    line-height: 18px;
}

But the legend is still perfectly centered on the line.

Yes, I can add a margin/padding/top coordinate but I want to know if the browser has any default values for the element that trigger this layout. I want to then, override these values.

Tested in Firefox (3.6.10), Chrome (6.0.472.63), Safari (5.0.2)

Update I'll leave this question open for another week just in case someone HAS been able to style <legend> elements. If no solutions are found I'll accept @jnpcl's answer.

Upvotes: 28

Views: 29980

Answers (8)

Jeff Chi 杰夫迟
Jeff Chi 杰夫迟

Reputation: 9

I was not able to solve this with float: left; width: 100%; in Safari 17.5.

But I tried something else that solved my problems:

<fieldset>
    <legend>
        <span>Text</span>
    </legend>
</fieldset>

legend {
    display: contents;
}

This completely removes the legend from rendering in Safari but still keeps the A11y functionality for screenreaders for the fieldset.

Upvotes: 1

user6078346
user6078346

Reputation:

This is a very old question, but still high in Google, so I'd like to share a solution that works for me (targeting only more modern browsers for the best experience).

fieldset: {all:unset};
legend:{all:unset};

this does the trick for me, unsetting all values to defaults. From there on I can happily style on a "clean-sheet".

Upvotes: 2

deltragon
deltragon

Reputation: 573

According to the specification, the legend is only a "rendered legend" if it is float: none.

This means that by doing:

<fieldset>
    <legend style='float: left'> Heading </legend>
    <div class='clearfix'></div>
    <!-- Your form elements here -->
</fieldset>

This makes the legend behave like a normal (if floated) element.

Note: clearfix is the Bootstrap clearfix class:

.clearfix::after {
    clear: both;
}
.clearfix::before, .clearfix::after {
    display: table;
    content: " ";
}

(A similar answer was posted already, but this does not include the clearfix trick, and the reference to the specification which shows that this is not a random but, but specified behaviour that is reliable.)

Upvotes: 0

Reza Mamun
Reza Mamun

Reputation: 6189

As per HTML - Living Standard, the below styles are working like a default:

fieldset {
    display: block;
    margin-inline-start: 2px;
    margin-inline-end: 2px;
    border: groove 2px ThreeDFace;
    padding-block-start: 0.35em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    padding-inline-start: 0.75em;
    min-inline-size: min-content;
}

legend {
    padding-inline-start: 2px; padding-inline-end: 2px;
}

Upvotes: 0

Fla
Fla

Reputation: 647

According to the specification, here is the default styling of the fieldset and legend elements. By resetting those properties, you can have a clean legend element to work with.

Upvotes: 0

jrn.ak
jrn.ak

Reputation: 36619

https://web.archive.org/web/20140209061351/http://tjkdesign.com/articles/how_to_position_the_legend_element.asp

Simply put, it is not possible across browsers to position the LEGEND element in a Fieldset.

Workaround: wrap the text from <legend> in a <span>, then reposition the <span>.

Upvotes: 10

Neoweiter
Neoweiter

Reputation: 864

This is enough : 

 form legend{
    float: left;
    width: 100%;
 }

Upvotes: 41

BWLR
BWLR

Reputation: 127

I've just styled my <legend>'s by giving them a position: absolute; top: -25px; and the the parent <fieldset> with a position: relative; padding-top: 30px;

Upvotes: 2

Related Questions