How to Prevent Chrome from Changing Font When Autofilling Username/Password

How to prevent Chrome from changing font when autofilling username/password?

try this!

      &:-webkit-autofill::first-line,
      &:-webkit-autofill,
      &:-webkit-autofill:hover,
      &:-webkit-autofill:focus,
      &:-webkit-autofill:active {
        font-family: Times, "Times New Roman", serif !important;
      }

you might only need this though

     &:-webkit-autofill::first-line

the others are just incase

Input text very small when hovering on autofill suggestion

There is a solution:

input:-webkit-autofill::first-line {font-size: 16px}

CSS font family issue with autofill within a text input

Here is my partial answer in hopes of helping:

I am having the same problem in Chrome, where I would like to change the font-family inside the input text area on hover of the auto-fill options, but it seems like it's the one thing that won't change.

From my experimenting with changing the autocomplete styles in WebKit, as described in the CSS tricks tutorial and in your code snippet, I can change the border styles, the box-shadow styles, even the font-weight and font-style.

Because I am able to change the other properties of the font inside the text input area on hover, but not the font-family, I'm led to believe that this is either intentional or a bug by Chrome. I also noticed the example on CSS tricks behaves the same way: the font-family is the default on hover, but switches to Lato after it's selected. So, I believe this is expected with Chrome. If I could find some explicit documentation that font-family is not allowed to be changed here, I would be more satisfied, but this is the most I could conclude.

Styling an autofill suggestion

The non-standard chained pseudo-classes :-webkit-autofill:focus can be used to style focused input elements being autofilled in Chrome.

It appears however that Chrome is ignoring some properties affected to :-webkit-autofill:focus, such as color and font-family. The color of the text can be changed through the (non-standard) property -webkit-text-fill-color, but there is no other property that can be used to change the font of the text.

A solution could have been to use JavaScript to copy the hovered suggestion, append it to a new element, place that element on top of the input and style it as you want. This is not possible though, as the suggestions are not injected as input value, and the content of the select input added by Chrome is not accessible either (probably both for security reasons).

You can however mitigate the issue by either:

• preventing Chrome from autocompleting by setting autocomplete="off" on the input element;
• setting height and width to the input to prevent it from changing size as the user hovers suggestions.

Hope that helps.

---

Related Topics