27

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.

Marko
  • 71,361
  • 28
  • 124
  • 158
  • Are you targeting IE? Or are you targeting Firefox, Chrome and Safari only? – Richard JP Le Guen Oct 19 '10 at 23:20
  • @LeguRi, I'm targeting all modern browsers, so all of the ones you've mentioned. Using my CSS properties above, IE has placed the legend where I want it. – Marko Oct 19 '10 at 23:57
  • 1
    I've almost given up on the `legend` tag because of it's unwillingness to be styled. In the last form I worked on, I threw my keyboard at the monitor and used `h3` s instead... – Yi Jiang Oct 20 '10 at 02:30
  • @Yi Jiang: Guess what, there's a broken coffee-cup on the floor and I'm using `

    ` tags.

     – Marko Oct 20 '10 at 03:11
  • The LEGEND tag is poorly supported in most browsers. You'll be fighting it every way. I eventually opted to use header tags instead. Not ideal semantic-wise, but seemed the most pragmatic route. – DA. Apr 20 '11 at 15:33
  • 1
    I found this useful and helped me solve the same issue http://www.mattheerema.com/articles/web-design/2006/04/getting-fieldset-backgrounds-and-legends-to-behave-in-ie/ – John Magnolia Jul 10 '15 at 14:34

7 Answers7

39

This is enough : 

 form legend{
    float: left;
    width: 100%;
 }
Neoweiter
  • 814
  • 2
  • 9
  • 17
10

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

ax.
  • 58,560
  • 8
  • 81
  • 72
drudge
  • 35,471
  • 7
  • 34
  • 45
  • 6
    hate to be mean but did you read the whole question? `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.` – Marko Oct 20 '10 at 00:02
  • 1
    From the article I linked, it appears that the default values are not override-able. – drudge Oct 20 '10 at 00:34
  • If he's targeting "all modern browsers" then I'm with @jnpcl on this one. +1 – Richard JP Le Guen Oct 20 '10 at 00:44
  • I'll remove my downvote since you deleted the code which used positioning. – Marko Oct 20 '10 at 03:10
  • The link appears to have died at some point since this answer was posted. – Michael Cordingley Jul 15 '15 at 16:46
  • @MichaelCordingley I fixed the link. – ax. Nov 04 '16 at 20:24
  • 3
    Just an FYI that wrapping the `` tag in a `` works for positioning, but it breaks accessibility using a screen reader / narrator. It won't be able to natively group the parent `
    ` with the `` tag.
     – Tony Anziano Aug 22 '19 at 21:32
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;

BWLR
  • 127
  • 2
  • 9
2

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

0

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.

Fla
  • 536
  • 6
  • 23
0

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;
}
Reza Mamun
  • 5,991
  • 1
  • 43
  • 42
0

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

deltragon
  • 555
  • 5
  • 14