How do I force the legend to expand the full width of the fieldset and keep the content filling?
My goal is to render the boxes with a border and the legend should be positioned at the top with the background color. The background color of the legend must span the entire width of the fieldset.
Based on Make Legend by filling full width in field box , I started with the following jsfiddle: http://jsfiddle.net/pdgreen/wcYXX/0 .
It looks good, but there is no padding in the fieldset, so the form elements are too close to the borders. When I add to padding I am left with: http://jsfiddle.net/pdgreen/wcYXX/1/ .
The content looks great, but the header no longer expands the width of the fieldset.
If I surround the content with div
, I can add in addition: http://jsfiddle.net/pdgreen/wcYXX/2/ , however this requires additional div
.
Is there a way to make it look like a third fiddle without the extra div
?
source to share
Yes, counteracting the filling of the field with a negative margin according to legend. Something like this: http://jsfiddle.net/wcYXX/3/
I set the fieldset to -5px (same as padding the fieldset, but negative) and then added a 5px padding to put the text back where it belongs.
This also means that you no longer need a border box, which is poorly supported in older browsers.
Now the css field will now look like this:
fieldset legend {
background: #369;
color: #FFF;
font-weight: 700;
text-align: left;
white-space:nowrap;
margin: -5px;
padding: 5px;
display: block;
width: 100%;
}
source to share