Html: Disable fieldset/legend magic with -webkit-appearance: none

[zcorpan]

Today I asked on Twitter

If you could specify some CSS to make a <legend> act like a normal element, what would it be, ideally?

https://twitter.com/zcorpan/status/1028999908433571846

answers so far

It feels that should be the role of display: block or display: inline

(It's display: block by default. Sites change the display value (to inline-block, table...) and expect the magic legend rendering.)

Given that the magic rendering of

occurs only inside

and the latter has other "magic" rendering features (e,g, BFC root and min-width: min-content; by default), maybe it would be better to "turn off" this "magic" on the

level?

I would try appearance: none, like many others, only for .

appearance: none? And by default it would have appearance: legend?

first thing that comes to mind is setting "appearance" to "none" but i admit that i'm a little ignorant to the history of that property

Yeah, it definitely makes sense for this to be on <fieldset>. Could maybe be useful to also have it on <legend>, but inherit the value from <fieldset>, to allow for keeping the special styles on <fieldset> without the special placement of <legend>.

(Just for clarification, I think I've always removed browser styles from <fieldset> and <legend> at the same time, so I personally wouldn't need appearance on <legend> if it were on <fieldset>, and definitely would want it on <fieldset>. But someone else might need it on both?)

appearance: none is what I thought about before writing the tweet, also. Since float and position:absolute/fixed on the legend disentangles the legend, I thought appearance: none would go on the legend, but I suppose it could go on the fieldset instead.

Any preference on the implementation side, if we are to do this? cc @bzbarsky

[zcorpan]

Related issue which also discusses appearance: none, #2805

[zcorpan]

I see 22 resources in httparchive that set 'appearance' on fieldset or legend:

https://gist.github.com/zcorpan/53efbbe20df21f10dbdd5e1368c790c4

I have not yet analyzed these.

[zcorpan]

Of those 22, there's only one that actually has a <fieldset>

rank | page | url | match
---|---|---|---
245049 | http://www.bigsquidrc.com/ | http://www.bigsquidrc.com/wp-content/cache/minify/63fbe.css | fieldset{-webkit-appearance:none;border:0;margin-bottom:25px;text-align:center}

As far as I can tell, it wouldn't render differently if the fieldset was a div.

[zcorpan]

First draft of a proposal at https://docs.google.com/document/d/1JM0YmKNRmhl1nEqcg_M_KlxBg_q7LIz9xgzmbrHp34o/edit?usp=sharing

This would allow appearance: none on the fieldset to remove the BFC, the forced 'display', the legend association. It also allows appearance: none on the legend to remove the BFC, the forced 'display', shrink-wrapping, alignment (or not?), and the special placement. It would also allow authors to specify these styles on other elements.

[zcorpan]

The above doc received some comments from @MatsPalmgren (thanks!). I will preserve those comments there, but have now changed sharing such that new comments are not accepted.

I have made a pull request that supersedes the doc; comments welcome there.

3934

[zcorpan]

Bugs:
https://bugzilla.mozilla.org/show_bug.cgi?id=1483787
https://bugs.chromium.org/p/chromium/issues/detail?id=874760

[zcorpan]

The PR for this is https://github.com/whatwg/html/pull/4035
Tests at https://github.com/web-platform-tests/wpt/pull/12677

@MatsPalmgren @mstensho is there still interest in solving this issue?