[css-ui-4] Clarify that 'appearance: none' causes an element to not be replaced anymore

[SebastianZ]

The description of the none value of the appearance property currently says this:

The element is rendered following the usual rules of CSS. Replaced elements other than form controls are not affected by this, and remain replaced elements. Form controls are not made to look like native controls of the host operating system. See below for details.

It doesn't explicitly state that it turns form controls into non-replaced elements.

Sebastian

[frivoal]

This seems a priori reasonable to me, but we (I?) should probably go through all the form elements and see if that actually works out. Specifically, I am wondering about complex form controls whose sub-components cannot just boil down to CSS styling.

[frivoal]

@zcorpan , do you have any insight into this?

[zcorpan]

Form controls aren't really replaced elements, though they share some traits with replaced elements. For example, buttons

https://html.spec.whatwg.org/multipage/rendering.html#button-layout

If the element is absolutely positioned, then for the purpose of the CSS visual formatting model, act as if the element is a replaced element. [CSS]

For the purpose of the 'normal' keyword of the 'align-self' property, act as if the element is a replaced element.

but it needs to act as a non-replaced element for the purpose of baseline alignment when it's inline-block.

Whether those traits are removed by appearance: none probably depends on the control. Buttons still have the traits. I haven't had the opportunity yet to research and specify rendering for all HTML widgets, but maybe progress or so is different.

[SebastianZ]

Related to this issue, according to https://bugs.chromium.org/p/chromium/issues/detail?id=480891#c24 the usage count for ::before and ::after pseudo-elements on <input> has increased over the last few years to more than 1% of websites.

So there is obviously a need to define this.

Some related discussion already happened in https://lists.w3.org/Archives/Public/www-style/2016Mar/0190.html.

Sebastian