Need spec for layout of ::before/::after pseudos on form controls

[MatsPalmgren]

http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=6281

It seems Firefox and Chrome are incompatible in a number of cases.

[MatsPalmgren]

Here's another testcase with ::before/::after on <option> and <optgroup> in various contexts. UAs are even more incompatible for these elements.
(I filed a bug to make Gecko more compatible with Chrome/Edge for those cases.)

[SelenIT]

Interestingly, Firefox starts to apply these pseudos to checkbox/radio input types after setting them -moz-appearance:none and any explicit valid display value, but doesn't do so for "text-like" input types.

[dbaron]

Per the CSS spec, I think these generally shouldn't work on form controls (since they're replaced elements), unless you can actually fully explain a form control using the CSS model. So in the cases where they do work, I think the spec needs to specify how.

[zcorpan]

I think it's still unclear to what extent form controls are replaced elements. e.g. per #4143 a button acts as a replaced element in some aspects but not in others. Buttons aren't fully explainable with just the CSS model, yet ::before/::after work.

Form controls are weird. 🙂

[SelenIT]

on form controls (since they're replaced elements)

But the HTML spec clearly lists them under Non-replaced elements. Don't we need a common definition of what makes the element replaced?