CODEWITHSUNDEEP
htmlcssfieldsetlegend
Jakob
Jakob

Reputation: 2746

Can any HTML element be styled as a fieldset/legend?

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?

Upvotes: 10

Views: 12872

Answers (4)

Kitanga Nday
Kitanga Nday

Reputation: 3565

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>

Upvotes: 0

joelpittet
joelpittet

Reputation: 508

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>

Upvotes: 4

Jesse Dhillon
Jesse Dhillon

Reputation: 7997

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.

Upvotes: 3

Victor Welling
Victor Welling

Reputation: 1897

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>

Upvotes: 2

Related Questions