Home/ Questions/Q 6013773
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T02:35:50+00:00

I would like to have a background for a legend field within a fieldset

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0