css-grid/flex float legend inside fieldset

Question

I'm working on a form where the client wants a series of fieldsets (groups) in a row. Semantically and for accessibility, it makes sense to use a <legend> from the parent <fieldset> as the label for the row, by floating it left and declaring display: grid; or display: flex; on the parent <fieldset>. This seems to work well enough for everything but Safari, which doesn't honour the float or treat the <legend> as a grid element.

Is this a known bug/interoperable difference between browsers, or am I doing something wrong? I can't seem to find any reference to this on the webkit bug tracker, and my [insert-fav-search]-foo is failing me.

These other two SE questions seem to be related, but do not address my issue: Can't position HTML legend tag with CSS Grid Grid layout on <fieldset>... Bug on chrome?

Reduced test case: https://codepen.io/ShonenKnife/full/dyJXERG

Chrome/Edge FF

Safari 14 OSX & Safari 15 iOS

<form class="v1-o-form">
  <div class="v1-o-form__wrap">
    <fieldset id="SECTOR1" class="v1-o-inputGroup">
      <legend>Test input group 1</legend>
      <fieldset id="SECTOR1__gdp" class="v1-o-inputGroup__section">
         <input type="number" id="gdp-SECTOR1" value="0.0" class="v1-a-inputSpinner__input" placeholder="–.–" min="-200" max="200" step="0.1" />
      </fieldset>
      <fieldset id="SECTOR1__components" class="v1-o-inputGroup__components">
          <input type="number" id="household-SECTOR1" name="" value="0.0" class="v1-a-inputSpinner__input" placeholder="–.–" min="-200" max="200" step="0.1" />
          <input type="number" id="govt-SECTOR1" name="" value="0.0" class="v1-a-inputSpinner__input" placeholder="–.–" min="-200" max="200" step="0.1" />
          <input type="number" id="investment-SECTOR1" name="" value="0.0" class="v1-a-inputSpinner__input" placeholder="–.–" min="-200" max="200" step="0.1" />
          <input type="number" id="export-SECTOR1" name="" value="0.0" class="v1-a-inputSpinner__input" placeholder="–.–" min="-200" max="200" step="0.1" />
          <input type="number" id="import-SECTOR1" name="" value="0.0" class="v1-a-inputSpinner__input" placeholder="–.–" min="-200" max="200" step="0.1" />
      </fieldset>
    </fieldset>
  </div>
</form>

<style>
:root {
  --focus-highlight: 0 0 0 0.15rem rgb(13 110 253 / 25%);
  --focus-inset-highlight: inset 0 0 0 0.15rem rgb(13 110 253 / 25%);
  --row-bg: #f2f2f2;
  --section-bg: #dadbe5;
  --pusherBlock-section-bg: #9398c9;
  --input-bg: white;
}

.v1-o-form {
  display: grid;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100vw;
}

.v1-o-form__wrap {
  display: block;
  margin: 0 auto;
}

.v1-o-inputGroup {
  display: grid;
  grid-template-columns: min-content min-content min-content;
  max-width: 80vw;
  border: none;
  margin: 0.3rem 0;
  padding: 0;
  background: var(--row-bg);
}

.v1-o-inputGroup legend {
  float: left;
  margin: auto 0;
  padding: 0 0.5rem;
  font-size: 0.9em;
  min-width: 10em;
}

.v1-o-inputGroup__components,
.v1-o-inputGroup__section {
  display: grid;
  background-color: var(--section-bg);
  padding: 0.3rem;
  border: 0;
  align-items: center;
}

.v1-o-inputGroup__components {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

input[type="number"] {
  text-align: center;
  margin: 0 3px;
  padding: 0;
}
</style>

score 1 · Answer 1 · answered Mar 22 '22 at 14:36

I eventually found a reference to a related Webkit issue: https://bugs.webkit.org/show_bug.cgi?id=220793

The bug appears to effect floats of the <legend> element more broadly and not specifically grid/flexbox layouts specifically.

The approach we took was to replace the legend element, with a div, whose content we could control via grid/flexbox. For accessibility, we use aria-labelledby to maintain descriptive properties of what should really be a <legend>.

score 1 · Answer 2 · answered Dec 02 '22 at 16:50

1

Leverage on display: contents.

legend {
  display: contents;
}

fieldset {
  display: inline-flex;
  gap: 16px;
  border: none;
  padding: 0;
  margin: 0;
}

<fieldset>
  <legend>
    <span>Name</span>
  </legend>
  <input type="text" aria-label="First Name" />
  <input type="text" aria-label="Last Name" />
</fieldset>

Result:

This will also allow you to be A11y compliant:

answered Dec 02 '22 at 16:50

raythurnevoid

2,652
1
25
24

`display: contents` is the ideal solution, however it is not well supported (even chromium sadly doesn't have great depth here). See: https://caniuse.com/?search=display%3A%20contents, https://hidde.blog/more-accessible-markup-with-display-contents/ – orionrush Dec 03 '22 at 22:57
@orionrush I see there are some a11y edge cases with buttons and tables, but in this particular case, I think you can use it safely – raythurnevoid Dec 05 '22 at 20:15

css-grid/flex float legend inside fieldset

2 Answers2