Today I learned: How to style a <fieldset>'s <legend> element as display inline


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: inline or display: inline-block, but you can give it float: left and 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!