Today I learned: How to style a <fieldset>'s <legend> element as display inline
Posted on
Context
I was creating a sorting toolbar component made of a fieldset, its legend,
two input of type radio, their associated label and finally a submit
button. That's it for the semantic.
In terms of presentation, the requirement was to hide the inputs only visually
so that they remain accessible, have the legend and the labels on the same
line.
First thought was to use flexbox and have the fieldset to be display: flex
but that was where the problems started. The legend would not flex. Then I
tried to make the legend and label display: inline-block. Still no luck.
This was about where I started googling.
I came across a bunch of statements:
From MDN Styling web forms section:
The
<legend>element is okay to style, but it can be a bit tricky to control placement of it. By default it is always positioned over the top border of its<fieldset>parent, near the top left corner. To position it somewhere else, for example inside the fieldset somewhere, or near the bottom left corner, you need to rely on positioning.
From Stackoverflow thread: Why won't my legend element display inline?
Legends are special. In particular, their default rendering can't be described in CSS, so browsers use non-CSS means of rendering them. What that means is that a statically positioned legend will be treated like a legend and be separate from the actual content of the fieldset.
The weird doesn't end there; if you reverse the order of the span and the legend, the legend will still show up on top in most browsers (but not in Opera, apparently).
— Boris Zbarsky
Legends just don't accept
display: inlineordisplay: inline-block, but you can give itfloat: leftand it will display similarly to what you want.
— kzh
That was a mind blow right there!
Solution
The solution was to float: left the legend and the two label as suggested
by kzh in the citation above. This
worked for me cross browser. I would not have expected float: left to be my
saviour in 2021!