740979 - implement :-moz-autofill pseudo-class on input elements with an autofilled value

Status: NEW

(Core :: CSS Parsing and Computation, defect)

Description

[Tantek Çelik]

We should implement a CSS :-moz-autofill pseudo-class that selects input elements when they are showing an autofilled value.

Use-case: to be able to change the default background color highlighting that is applied when input elements are auto-filled.

This feature (as :autofill) is currently one of the proposed features for CSS4-UI:
http://wiki.csswg.org/spec/css4-ui#more-selectors
though it could be spec'd as part of Selectors4 instead since that's further along than CSS4-UI:
http://wiki.csswg.org/spec/selectors4

See related webkit bug / feature request: 
https://bugs.webkit.org/show_bug.cgi?id=66032

Comment 1

[Mounir Lamouri (:mounir)]

Isn't that a threat regarding user privacy?

Comment 2

[isherman]

Mounir: Please see the discussion in [ https://bugs.webkit.org/show_bug.cgi?id=66032 ]: Site authors can already override the coloring using JS hackery (e.g. by swapping in a new <input> element to replace the existing one, copying over the autofilled data), so there's not -- to the best of my knowledge -- any new security or privacy risk from this proposal.

Comment 3

[yisibl]

'Measuring the impact of autofill on your forms' https://paul.kinlan.me/detecting-when-autofill-happens/

Comment 4

[Luke Chang [:lchang] (inactive)]

I'd like to take this bug as it blocks the ongoing Form Autofill feature.

On top of bug 1341230, I've done a patch [1] that introduces the ":-moz-autofill" pseudo-class and can be manipulated in the Form Autofill codebase [2]. However, I faced two questions that might stop me from moving on:

1) According to the wiki [3], ":autofill" is supposed to be used for overriding the default background color of autofilled input forms. However, input elements with custom background color are rendered in Gecko styling, which looks very different from the default OS-native styling. Since the state of ":autofill" changes frequently while doing the preview in Form Autofill, UX doesn't want the elements' appearance to change that much. Therefore, we chose to use CSS filter instead, which causes users unable to override the color of autofilled elements by setting the CSS background-color with this pseudo-class (unless they realize 
 that they need to override it by setting CSS filter).

2) A autofilled input form means the one filled by browser instead of users. In addition to Form Autofill, if I understand correctly, it should be also affected by Password Manager (and probably Form History). In the MVP scope of Form Autofill, we're not going to change the behaviors of other modules. That is to say, my patch won't cover the whole user story of ":-moz-autofill" if there is any.

I'm not sure whether it's better to file another bug to introduce another proprietary pseudo-class for Form Autofill only and leave this bug for the future implementation.


Hi Cameron, Could you give us some advice? Thanks.



[1] https://github.com/luke-chang/gecko/commit/197fdedcee5e4c660208a64db62af7c3b246d70e
[2] https://github.com/luke-chang/gecko/commit/8c18fe7c1f34d11813c16f170a8c717c3e36218e
[3] https://wiki.mozilla.org/CSS/:autofill

Comment 5

[Luke Chang [:lchang] (inactive)]

After offline discussing with Cameron, we agreed that it would be better to implement an internal-only pseudo-class for Form Autofill first and then improve it in this bug once we got more details about :autofill. I've filed bug 1355438 for that.