Menu
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?
317
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>
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.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
