9

Using the display property, HTML elements become interchangeable from a styling perspective. This doesn't seem to be the case for fieldset and legend, however.

Is it possible to style other HTML elements to look like fieldset and legend?

Jakob
  • 2,588
  • 5
  • 27
  • 34

4 Answers4

4

This works pretty good, but ie6 will act a bit strange if the background is an image, nothing a conditional comment couldn't fix. Tested in IE6-8, FF3.6, Safari 5, Chrome 5

.fieldset {
    position: relative;
    border: 1px solid #000;
    margin: 20px;
    padding: 20px;
    text-align: left;
}

.fieldset .legend {
    background: #fff;
    height: 1px;
    position: absolute;
    top: -1px;
    padding: 0 20px;
    color: #000;
    overflow: visible;
}

.fieldset .legend span {
    top: -0.5em;
    position: relative;
    vertical-align: middle;
    display: inline-block;
    overflow: visible;
}


   <div class="fieldset">
      <div class="legend">
         <span>This is the title</span>
      </div>
      Test
   </div>
joelpittet
  • 488
  • 5
  • 15
3

The previous answer is incorrect, if you want to see why try this:

<body style="background-color: #f00">
  <div style="border: 1px solid #000">
      <h1 style="background: #fff; margin-top: -5px; margin-left: 10px; padding: 0 10px; width: 150px;">Foobar</h1>
  </div>
  <fieldset><legend>Foobar</legend></fieldset>
</body>

AFAIK there is no way to have that border-disruption effect that the legend element causes on the fieldset's border. I don't believe that is possible with CSS alone, it's just something that is part of the way the fieldset tag is rendered.

Clarification: I don't know of any way to position a block or inline element such that it straddles the visible border of its containing block element, and then causes the container element's border to be broken behind its box. That's what a <legend> does to the border on its containing <fieldset> element.

Jesse Dhillon
  • 7,841
  • 1
  • 34
  • 34
  • 1
    My answer is not incorrect, it just requires certain conditions to work. You'll find this is usually the case with this kind of "trickery"; there's hardly ever a one size fits all solution. – Victor Welling Jul 17 '10 at 13:00
  • Well his question was "how can I style an element as a fieldset/legend pair?" When you look at the document I provided, do you see two identical blocks? – Jesse Dhillon Jul 17 '10 at 17:09
  • What I really wanted to know is whether there's a way (using the CSS standard) to obtain the exact effect that a `fieldset`/`legend` creates, or if the effect is hard-coded for only `fieldset`/`legend`. Since it does indeed seem to be hard-coded, I'm accepting this answer. – Jakob Jul 18 '10 at 11:45
  • 1
    It appears the [HTML5 spec defined the rendering of these elements](https://www.w3.org/TR/html5/rendering.html#the-fieldset-and-legend-elements) explicitly, probably to match what UA's were already doing. See also: [Is the
    + top border “erasing” behavior defined by any standard (HTML or CSS)?](http://stackoverflow.com/questions/39541432/is-the-fieldset-legend-top-border-erasing-behavior-defined-by-any-standa)
    – jimp Sep 20 '16 at 16:10
2

Sure, for example: a DIV element with a border and a child heading element with the background color set positioned to overlap the DIV's border would look just like a fieldset and legend.

Very basic example:

<div style="border: 1px solid #000">
    <h1 style="background: #fff; margin-top: -5px; margin-left: 10px; padding: 0 10px; width: 150px;">Foobar</h1>
</div>
Victor Welling
  • 1,867
  • 12
  • 14
  • 1
    This can only look correct if the background is a flat color, not an image. – Jesse Dhillon Jul 17 '10 at 10:36
  • True. Unless it's possible to apply the background image to the child heading element as well and match it up with the background. This would require the elements to be in a fixed position to work however. – Victor Welling Jul 17 '10 at 12:58
0

So I fixed the code so that it looks somewhat (It really look like the legend tag) like the legend tag.

    <div style="border: 2px groove #ccc">
    <h1 style="font-weight:normal; background: #fff; margin-top: -11px; margin-left: 10px; padding: 0 10px 0 0; width: 40px; height:20px; font-size:1em;">Foobar</h1>
</div>
  <fieldset><legend>Foobar</legend></fieldset>
Kitanga Nday
  • 3,517
  • 2
  • 17
  • 29