字段集的默认 CSS 值<legend>

Question

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.

I'm trying to reset it's position so that it sits just like any other element. ie 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.

Answer 1

This is enough :

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

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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;
}

Answer 6

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

Answer 7

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