CSS AutoComplete font size

Question

I couldn't figure out how to increase or how to use the default font size for the preview text when hovering over an autocomplete suggestion from the browser.

I'm using https://tailwindcss.com/ for all styles.

E.g.:

This is my normal input element with the default font size after entering some text:

And this is the font size of the preview when I hover one of the suggested autocomplete items:

As you can see, the font size is much smaller than in the first image.

I'm already using some CSS-snippet to disable all browser-specific stylings:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: inherit;
  -webkit-text-fill-color: inherit;
  -webkit-box-shadow: inherit;
  transition: background-color 5000s ease-in-out 0s;
  font-size: inherit;
}

The last property font-size does nothing.

I'm using the following css for the input font-size:

    font-size: 1.125rem !important;

I also tried to assign the font-size as inline-style to fix it, but it doesn't work as well:

Live example: https://codesandbox.io/s/o766kp4z05 Use the example and try to enter your email into the email field and look at the font size. It has the same problem with the font size.

Is it possible to fix the font size?

remove the 25px font-size from the inline css for a start... after you do this and test it, post an update (to say that it has failed/suceeded) — Rachel Gallen, Jul 25 '19 at 07:20
+1 I have the same issue and it seems that there is no way to prevent that font size change. Probably this should be reported as a bug to Chrome... — collimarco, Sep 01 '19 at 12:29
@Ash my bad. For some unknown reason yesterday I misread the other question and thought it was about how to prevent autofill altogether. Removing my comments. — tao, Sep 18 '20 at 08:11

StefanBob · Answer 1 · 2022-02-02T19:15:36.950

24

EDIT: This doesn't work for font-size anymore, and potentially more attributes moving forward

How to change Chrome autocomplete styles on input:

input {
    ...
    font-family: $body-font;
    font-size: 1rem;
    font-weight: bold;
    color: #000;
    background-color: #fff;
      
    // Background color
    &:-webkit-autofill {
      -webkit-box-shadow: 0 0 0 1000px #fff inset;
    }
      
    // Font styles
    &:-webkit-autofill::first-line {
      font-family: $body-font;
      font-size: 1rem;
      font-weight: bold;
      // color: green;
    }
}

edited Feb 02 '22 at 19:15

answered Aug 24 '20 at 18:31

StefanBob

4,857
2
32
38

4

Yes this worked fine. `&:-webkit-autofill::first-line` – Rakesh Chand Oct 09 '20 at 12:15
5

No longer working for me on macOS Chrome Version 95. The reason Chrome removed autofill font face styles was down to a security concern https://bugs.chromium.org/p/chromium/issues/detail?id=1035058. `::first-line` was a trick to workaround their initial bandaid "fix", but they've fixed our workaround now also. Of note, Chrome 96 will support `:autofill` https://www.chromestatus.com/feature/5592445322526720 but I'm not sure to what degree Chrome will let us style it. – Kerry Johnson Nov 04 '21 at 17:52
2

Checking back in to say that `:autofill` sadly doesn't allow font size changes (haven't tested other font properties). – Kerry Johnson Jan 06 '22 at 06:30
3

@KerryJohnson stopped working for me as well, :autofill at no help, let me know if you find something around font size. – Rakesh Chand Jan 06 '22 at 11:10

score 3 · Answer 2 · answered Mar 17 '20 at 11:39

I know that this question is old, but I found this solution, which works in my case:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-animation: autofill 0s forwards;
  animation: autofill 0s forwards;
}

@keyframes autofill {
  100% {
    background: transparent;
    color: inherit;
    font-size: inherit;
  }
}

@-webkit-keyframes autofill {
  100% {
    background: transparent;
    color: inherit;
    font-size: inherit;
  }
}

If you don't want background or font-color to change, then you can remove them from the keyframes.

Thank you!

score 1 · Answer 3 · answered Jan 06 '20 at 20:54

This is very tricky! I played with this

:-internal-autofill-previewed {
  font-size: 22px !important;
}

The blinking marker ( | ) changes when hovering but the "placeholder" is still the same.. :-internal-autofill-previewed::placeholder didn't work either..

Stephen M Irving · Answer 4 · 2019-12-13T14:48:01.337

Overwriting user-agent styling can sometimes be tricky. I found this article which talks about styling input autocompletes (https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/) but it is a very similar snippet to what you are already using and it does not solve the issue you asked about. I'm afraid it may be one of the couple of parts of native elements that we are currently unable to style.

Another similar issue is that if you have a fixed background image set for the input element, an icon of a lock set to the edge for a password field for instance, and then you use the autocomplete feature for the form, the background image will completely disappear and there is nothing that can be done to fix it currently. Just one of the things we have to deal with and tell clients that it's not possible.

score -5 · Answer 5 · answered Jul 25 '19 at 06:49

-5

Seems the font size is overriding. Can you try with the styles with more hierarchical parent approach?

answered Jul 25 '19 at 06:49

akash edakkalathur

1
2

You mean to assign the font-size to one of the parent elements? The parents already have a bigger default font size. – Patrick Wozniak Jul 25 '19 at 06:59
It may be overridden by the inheritance. eg: priority will maters in css with respect to the specifying the parent hierarchy. That is .parent .child .innerchild{ fontsize : 16px } ---- This will have high priority will override the below style. .innerchild{ fontsize : 16 px} ---- will have lower priority compared to the above one. – akash edakkalathur Jul 25 '19 at 13:29

CSS AutoComplete font size

5 Answers5

Linked