I want to be able to style fieldsets and legends independently
Submitted by Anonymous
Permalink https://webwewant.fyi/wants/65fde7769208cf00966fdbde/
This idea is currently being discussed.
I work with forms frequently and strongly prefer using the semantic <fieldset> and <legend> elements over unsemantic <div> and heading workarounds. However, two long-standing CSS support gaps make complex layouts frustratingly difficult to achieve:
- The
<legend>is not independently styleable from the<fieldset>border. The legend element is rendered inline at the top of the fieldset border by default, and repositioning or decoupling it from the border is not reliably possible with CSS today. <fieldset>does not respond todisplay: flexordisplay: gridas expected. Browsers establish a block formatting context inside a fieldset in a non-standard way, which prevents flex and grid layout from working properly on the fieldset itself.
For example, I recently wanted to place two fieldsets side by side, where each contained nearly identical inputs except the left side had one extra input at the top. My goal was to use flex to bottom-align the fields within each fieldset, and use auto margins on the legends to keep them aligned at the top across both columns. Neither technique worked reliably.
I ended up substituting <div> elements with <h3> headings — which works for that specific page, but breaks heading hierarchy if the component is ever reused in a different context.
I want browsers to allow full CSS layout control over <fieldset> and <legend>, including support for display: flex and display: grid on the fieldset, and independent positioning of the legend from the fieldset border.
- Votes
- 0
What are votes for and how are they tallied?