CSS AutoComplete font size [duplicate]

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?

Answer 1

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;
    }
}

Answer 2

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!

Answer 3

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..