canonical / vanilla-framework

From community websites to web applications, this CSS framework will help you achieve a consistent look and feel.
https://vanillaframework.io
GNU Lesser General Public License v3.0
829 stars 165 forks source link

bug: dark theme text input turns white on hover and select #4932

Open britneywwc opened 10 months ago

britneywwc commented 10 months ago

Describe the bug

When hovering over an autofill option in the text field, the original text field turns white. After selecting an autofill option, the search bar reverts to light theme.

To Reproduce

Steps to reproduce the behavior:

  1. Go to dark form example
  2. Enter a test email in the email address section and hit enter to submit
  3. Click on the email address section, hover over the previously submitted text and see error.
  4. Select the autofill suggestion and see error.

Expected behavior

The input text field should remain the original theme colours and font.

Screenshots

Screenshot 2023-12-04 at 11 26 51 AM Screenshot 2023-12-04 at 1 26 29 PM

Desktop (please complete the following information):

OS: macOS Browser: Chrome Version: 119.0.6045.199

elsayedz commented 9 months ago

I think this problem is because of -internal-autofill-selected field It's overriden by the browser default value.

Screenshot 2024-01-01 at 12 55 08 AM Screenshot 2024-01-01 at 12 56 54 AM

The hacky solution I found for this was adding the following

input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 0s 600000s, color 0s 600000s;
  }
Screenshot 2024-01-01 at 12 58 04 AM

Still trying to figure how to fix it from the sass file.

bartaz commented 6 days ago

Triage: seems still to happen. Looks like browser (chrome) overrides input colour if the value is auto-filled.

We should have a look if that's something we could address.

syncronize-issues-to-jira[bot] commented 6 days ago

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-15249.

This message was autogenerated