Make a legend fill up the full width within the fieldset
I would like to have a background for a legend field within a fieldset. And I want it to take up the full width, but only within the fieldset. If I use legend {width: 100%} it will be wider than the fieldset.
Here is an example, runnable in JSFiddle:
<html>
<head>
<style>
fieldset {
border:0;
outline: 1px solid gray;
}
legend {
font-weight:bold;
background: orange;
width: 100%
}
</style>
</head>
<body>
<fieldset>
<legend>Legend</legend>
Content of Fieldset
</fieldset>
</body>
</html>
Is there any way I can make the legend only fill up the width within the fieldset?
Answer
See: http://jsfiddle.net/TAvRF/1/
You can use box-sizing: border-box:
legend {
font-weight:bold;
background: orange;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Then you can add padding: http://jsfiddle.net/TAvRF/5/
Although, just setting padding: 0 and forgetting about box-sizing: border-box seems to work for me.. http://jsfiddle.net/TAvRF/6/