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?
views:
60answers:
3
+1
A:
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
2010-07-17 10:20:20
This can only look correct if the background is a flat color, not an image.
Jesse Dhillon
2010-07-17 10:36:41
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
2010-07-17 12:58:33
+2
A:
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
2010-07-17 10:35:32
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
2010-07-17 13:00:47
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
2010-07-17 17:09:36
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
2010-07-18 11:45:45
A:
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
2010-07-18 03:26:17