Bug 85150 – REGRESSION (r113511): Many autofilled form fields lack the default autofill background even when authors don’t override the autofill colors

• Status: RESOLVED
• Resolution: FIXED
• Component: Forms

After <http://webkit.org/r113511>, the fix for bug 66032, many autofilled form fields no longer have the default autofilled appearance (light yellow background). The intent of that change was to allow authors to override the autofilled appearance explicitly using the -webkit-autofill pseudoclass. However, after that change, any rule with equal or higher specificity than the rules in the default style sheet, even if it doesn’t use the pseudoclass, can override the default autofill style.

For example, in the URL, an author rule like
    input[type=text] { background-color: white; }
overrides the UA rule
    input:-webkit-autofill { background-color: #FAFFBD; }

<rdar://problem/11343714>

Even equal or higher specificity isn’t required here. Any matching author rule will override the UA rule, which is no longer !important.

[Ilya Sherman]

Hmm, based on my reading of [ http://www.w3.org/TR/CSS21/cascade.html#cascading-order ], the user agent style should have the lowest precedence, so this is behaving "correctly".  Do you have a recommendation on how to implement the more desired behavior, which is the the user agent style overrides the author-specified style *unless the author overrides input:-webkit-autofill* without violating the CSS spec?

[Tab Atkins Jr.]

There *is* a way to get this to work, as long as the state is exclusive with other similar states.  I think it is here.

Placeholder has a basically identical problem.  The way that was discussed to fix that was to add some additional pseudo-elements.

<input> gets a ::value that wraps its normal text contents, and only accepts a handful of properties.  (This part isn't strictly necessary.)

While an <input> is showing a placeholder, it generates a ::placeholder pseudo which wraps the placeholder text.  Since this only happens when the input doesn't have any normal text, this acts "normally".

Similarly, an auto-filled input would generate an ::autofill pseudo-element that wraps its autofilled text.  Once the user starts interacting with it, the text would move from ::autofill to ::value.

This handles the specificity problem by ignoring it, because rules on "input" would only affect the ::autofill pseudo by inheritance, and inheritance is the weakest possible form of rule.

Possibly, to enforce that these states are exclusive, we should do these three as a single pseudo with an argument:  ::value(normal), ::value(placeholder), and ::value(autofill).  The input would generate one and only one of these at a time.

(Theoretically, we could do this with pseudo-classes on the pseudo-element, but that's not allowed by current Selector syntax, and it would still potentially suffer problems with authors just styling "::value" and overriding all the states.)

[Alexey Proskuryakov]

r113511 has been rolled out in <http://trac.webkit.org/changeset/115706>, so this bug is fixed now. Thank you for addressing it!