Skip to content
GitLab
Open
Issue created by Administrator@rootContributor

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>

Renders: image

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;
}

Which renders the following (using the same above HTML): image