Fix input colouring when autofill is on

[andreadelrio]

Summary

When autofill is on in Chrome, it changes the styling of our input fields in both light and dark mode. Using CSS I've modified the styles that get applied in this scenario.

GIFs of Before vs After

And here's some screenshots...

Autofill on in light mode - current

Regular styling of input field - Light mode

Proposed fix in light mode

Autofill on in dark mode - current

Regular styling of input field - Dark mode

Proposed fix in dark mode

Note: I'm adding a border because I'm using box-shadow to be the background which would leave the input field without a border.

Like Ryan mentioned in #2469, this solution is hacky. According to references that I found (and that were mentioned in related issues), there doesn't seem to be any other way to fix this issue right now. This takes cares of the problem while we find a more solid solution.

Fixes #2469
Fixes #827

Checklist

• Check against all themes for compatibility in both light and dark modes
• [x ] Checked in mobile
  - [ ] Checked in IE11 and Firefox
  - [ ] Props have proper autodocs
  - [ ] Added documentation examples
  - [ ] Added or updated jest tests
  - [ ] Checked for breaking changes and labeled appropriately
  - [ ] Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[cchaos]

This does fix the issue of not being able to see the icons in dark mode auto-fill. But it also gets rid of the highlight indicating that auto-fill is happening. I'm wondering if we should still add a bit more color or highlight back into it instead of making it the same as the normal state.

[andreadelrio]

This does fix the issue of not being able to see the icons in dark mode auto-fill. But it also gets rid of the highlight indicating that auto-fill is happening. I'm wondering if we should still add a bit more color or highlight back into it instead of making it the same as the normal state.

@cchaos That's a good catch. I've been looking into how this is handled elsewhere and maybe we shouldn't try to match the styling of fields w/autofill with the one in empty fields at all. Instead we'd simply fix what Chrome implements. Resulting in this:

What do you think? I think this really highlights the autofill which is what Chrome intends and it doesn't look bad.

[cchaos]

I think that works great! Like you said, it's still Chrome's style of highlighting auto-fill but just fixes the coloring on our side.

[cchaos]

I know this specifically called out Chrome, but I checked in Chrome, Safari, and Firefox. Firefox is ok, it's readable but loses some of the input boundaries. Don't know what IE does, but could be something checked out real quick.

[andreadelrio]

I know this specifically called out Chrome, but I checked in Chrome, Safari, and Firefox. Firefox is ok, it's readable but loses some of the input boundaries. Don't know what IE does, but could be something checked out real quick.

Thanks for checking in the other browsers. I tried to get autofill working locally on IE (in both Browserstack and VirtualBox) but had no luck. Closing this and we can fix IE if it's an issue in the future.