Today I learned: How to style a <fieldset>'s <legend> element as display inline
I was creating a sorting toolbar component made of a
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
First thought was to use
flexbox and have the fieldset to be
but that was where the problems started. The
legend would not flex. Then I
tried to make the
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:
<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: inline-block, but you can give it
float: leftand it will display similarly to what you want.
That was a mind blow right there!
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!