2

I'm placing content in ::before rules on each of the fieldsets in my form, but they seem to be placed under the legend of the field, not as the first child like I would expect. I would like to have the ::before content justified with the top of the legend, not the top of the input elements. It isn't enough to shift the ::before content vertically across the board because my legends are different heights. Does anyone know why this is happening and how to get the behavior I want?

Expected behavior:

before    legend
          legend
          legend

          input

HTML:

<form>
    <fieldset>
        <legend>This is the legend.</legend>
        <input type="text" />
    </fieldset>
    <fieldset>
       <legend>This is a very very very very very very very very very very very very very very very very very very very very very long legend.</legend>
       <input type="text" />
    </fieldset>
</form>​

CSS:

fieldset
{
    margin-left: 40px;
    width: 120px;
}

fieldset::before
{
    margin-left: -40px;
    float: left;

    content: "before";
}​

http://jsfiddle.net/GYzTA/2/

EDIT:

I found a "doh" solution of just changing the CSS selector, but I'm still curious why the fieldset::before rule seems to insert the content after the legend.

fieldset legend::before
{
    margin-left: -40px;
    content: "before";
}​
  • I can't tell what behavior you want. Do you want the pseudo-elements to show up on the same line as the first line of each legend, or above the legends? – BoltClock Feb 11 '12 at 18:30
  • I would like the ::before content to be justified with the top of the legend (and fieldset); I updated with a visual. –  Feb 11 '12 at 18:31

1 Answers1

-1

Referencing Default CSS values for a fieldset <legend>

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

Solution: Use <span> instead of <legend>

Community
  • 1
  • 1
Rusty Fausak
  • 7,355
  • 1
  • 27
  • 38
  • If there were a sister tag to `legend`, I'd think it would be a heading rather than a `span`. The answer you cite says something quite different, you should re-read it. By the way, is that a Serra Avatar in your profile picture or is it just me? :) – Wesley Murch Feb 11 '12 at 18:37
  • Interesting, it looks like it automagically styles it to be situated on the top border (without override?). I guess that's why the ::before content was ending up below it. Thanks for the link. –  Feb 11 '12 at 18:42
  • @atonparker: `legend` is a strange beast, this may not be the last of your design nightmares that are caused by it. – Wesley Murch Feb 11 '12 at 18:44
  • If you use a `span`, you lose all the accessibility benefits of `legend`. Luckily there is a decent solution — see the most upvoted answer on the question you linked to: https://stackoverflow.com/a/20705034/466453 – Weston Nov 17 '19 at 22:20