Default CSS values for a fieldset

Question

I\'m trying to use a

as a title inside a

.

In browsers other than IE, the

is pos

Answer 1

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 2

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;

Answer 3

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 4

This is enough :

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

Answer 5

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