Non-horizontal form-group using fieldset renders legend font-size different than label
Created by: tmorehouse
When using a <fieldset>
as the root element of a non-horizontal .form-group
(i.e. no .form-row
or .row
), the <legend>
element renders differently than a <label>
(specifically the font-size being set to 1.5rem
via reboot)
<div class="form-group">
<label for="input">Label</label>
<input type="text" class="form-control">
</div>
<fieldset class="form-group">
<legend>Foobar</legend>
<div role="group">
<div class="form-check form-check-inline">
<input id="check1" class="form-check-input" type="checkbox" name="checks" value="A">
<label for="check1" class="form-check-label">Radio A</label>
</div>
<div class="form-check form-check-inline">
<input id="check2" class="form-check-input" type="checkbox" name="checks" value="B">
<label for="check2" class="form-check-label">Radio B</label>
</div>
</div>
</fieldset>
Manually adding a style font-size: inherit;
or font-size: 1rem;
to the <legend>
appears to fix this issue, but it would be preferential not to have to add the additional styling.
Proposed solution (to mimic <label>
default) in /scss/_forms.scss
before the .col-form-label
rule definition:
.form-group legend {
font-size: inherit;
}