Problem/Motivation

Browsers are using internal styles to change background color of input elements that are auto filled. This usually looks bad and not aligned with theme design. We should reset input bg color back to original state that is defined with `$input-bg` SASS variable.

CommentFileSizeAuthor
#6 interdiff-3256665-5-6.txt1.53 KBpivica
#6 reset-input-bg-color-autofill-3256665-6.patch2.95 KBpivica
#5 reset-input-bg-color-autofill-3256665-5.patch2.72 KBpivica
#5 interdiff-3256665-4-5.txt3.45 KBpivica
#4 interdiff-3256665-2-4.txt2.43 KBpivica
#4 reset-input-bg-color-autofill-3256665-4.patch1.93 KBpivica
#2 reset-input-bg-color-autofill-3256665-2.patch1.12 KBpivica

Comments

pivica created an issue. See original summary.

pivica’s picture

pivica commented
StatusFileSize
new reset-input-bg-color-autofill-3256665-2.patch1.12 KB

Here is a patch.

Additionally Chrome is changing font size of input while you do actual selection of auto fill options, when you select some option the font size is restored to original value. This is not possible to fix for now because Chrome is using internal style with `!important` statement and we can not override this.

pivica’s picture

pivica commented
Status: Active » Needs review
pivica’s picture

pivica commented
StatusFileSize
new reset-input-bg-color-autofill-3256665-4.patch1.93 KB
new interdiff-3256665-2-4.txt2.43 KB

Disabling autofill bg color for inputs is not something that everybody will like because information about auto filed input fields will be lost visually. We will add a new SASS variable for this so custom theme can decide will it want to reset this bg color, use some other color or disable resetting so default browser colors are used.

pivica’s picture

pivica commented
StatusFileSize
new interdiff-3256665-4-5.txt3.45 KB
new reset-input-bg-color-autofill-3256665-5.patch2.72 KB

Well this is a bit complex, browsers, well Chrome is really doing a lot of overrides here with an !important flag and that is making our life difficult - no idea why they thought this is a good idea...

Here is a new patch, added a mixin so rule can be used easily in custom CSS code and added color override hack.

pivica’s picture

pivica commented
StatusFileSize
new reset-input-bg-color-autofill-3256665-6.patch2.95 KB
new interdiff-3256665-5-6.txt1.53 KB

Added helper function `bs-input-autofill-box-shadow` so box shadow value can be easily reused or overridden.

  • pivica committed b99f5bd on 8.x-1.x 
    Issue #3256665 by pivica: Browsers are changing input bg color on...
pivica’s picture

pivica commented
Status: Needs review » Fixed

Committed.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.