CSS AutoComplete font size [duplicate]

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

Solution 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!

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