Bug 85150 - REGRESSION (r113511): Many autofilled form fields lack the default autofill background even when authors don’t override the autofill colors
Summary: REGRESSION (r113511): Many autofilled form fields lack the default autofill b...
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P1 Normal
Assignee: Nobody
URL: https://accounts.google.com/Login
Keywords: InRadar, Regression
Depends on:
Reported: 2012-04-28 21:10 PDT by mitz
Modified: 2012-05-01 16:34 PDT (History)
9 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description mitz 2012-04-28 21:10:09 PDT
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; }
Comment 1 mitz 2012-04-28 21:11:36 PDT
Comment 2 mitz 2012-04-28 21:58:08 PDT
Even equal or higher specificity isn’t required here. Any matching author rule will override the UA rule, which is no longer !important.
Comment 3 Ilya Sherman 2012-04-30 00:19:56 PDT
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?
Comment 4 Tab Atkins Jr. 2012-04-30 19:15:51 PDT
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.)
Comment 5 Alexey Proskuryakov 2012-04-30 20:58:38 PDT
r113511 has been rolled out in <http://trac.webkit.org/changeset/115706>, so this bug is fixed now. Thank you for addressing it!