Override Bootstrap 5 fieldset style

user_7999380 0
Viewed 1341

Back in previous versions of Bootstrap (and also with vanilla CSS), the following HTML:

<fieldset>
  <legend>Test</legend>
    Welcome!
</fieldset>

Outputs a fieldset with a border, where the legend goes over it:

Fieldset with legend over its border

Nevertheless, when the same HTML is used alongside Bootstrap 5, the output looks like this:

Fieldset in Bootstrap 5

How can I override bootstrap CSS, so the fieldset has its border visible again with its legend over it?

bootstrap-5 twitter-bootstrap css html
2 Answers

Any css can be reset to its default by using revert:

fieldset, legend {
   all: revert;
}


.reset {
    all: revert;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<fieldset>
    <legend>Legend</legend>
</fieldset>

<fieldset class="reset">
    <legend class="reset">Reset legend</legend>
</fieldset>

user_139291400

A solution might be overriding legend and fieldset in CSS like this:

fieldset {
    border: solid 1px gray;
    padding-top: 5px;
    padding-right: 12px;
    padding-bottom: 10px;
    padding-left: 12px;
}
legend {
    float: none;
    width: inherit;
}

However I don't think this approach is the cleanest for this approach, is there any recommended way to achieve this?

user_79993800
Related