body { padding: 10px; } fieldset { background: #ccc; border: 1px solid #666; -moz-border-radius: 4px; border-radius: 4px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; margin-top: 26px; padding: 10px; } .ie7 fieldset { margin-top: 0; } /* create a new element based on the data-legend attribute and style */ fieldset:before { background: #ccc; border: solid #666; border-width: 1px 1px 0 1px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; content: attr(data-legend); float: left; font-weight: bold; margin-top: -37px; padding: 5px 10px; position: relative; } /* position the real legend off screen */ legend { left: -999em; position: absolute; } /* ie7 doesn't support :before, so just show the real legend */ .ie7 legend { font-weight: bold; padding: 5px; width: auto; position: static; } div + div { margin-top: 10px; } p { margin: 15px 0; }
<!-- add the legend value to a data attribute on the fieldset --> <fieldset data-legend="Form legend"> <legend>Form legend</legend> <div> <label for="txt1">Text box 1</label> <input type="text" id="txt1"> </div> <div> <label for="txt2">Text box 2</label> <input type="text" id="txt2"> </div> </fieldset> <p>Styling form legends is still quite a tricky business, with Opera being pretty bad, and the others unable to achieve certain appearances.</p> <p>However, by adding the legend value as a data-legend attribute on its fieldset, you can style it however you like. Just absolutely position the actual legend off screen and… <b>bingo!</b></p>