To be able to style fieldsets #856
WebWeWantBot
started this conversation in
Wants
Replies: 1 comment
-
|
I think this falls under the scope of Open UI. @gregwhitworth is there somewhere that asks like these get tracked for Open UI or is WWW the correct place still? |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
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:<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
flexto bottom-align the fields within each fieldset, and useautomargins 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 fordisplay: flexanddisplay: gridon the fieldset, and independent positioning of the legend from the fieldset border.Beta Was this translation helpful? Give feedback.
All reactions