input:-internal-autofill-selected being overridden on Chrome (via webkit?)

Question

Using Chrome 81.0.4044.92 (Official Build) (64-bit) (cohort: Stable) on windows, with any saved passwords while logged in via sync creates an override on the input:-internal-autofill-selected property of my input's.

Demonstrated here:

html

<div>
  <form className="login">
    <div className="username">
      <input
        className="login-input"
        id="username"
        type="email"
        placeholder="email"
      ></input>
    </div>
    <div className="password">
      <input
        className="login-input"
        id="password"
        type="password"
        placeholder="password"
      ></input>
    </div>
    <div>
      <button onClick={handleClick}>Submit </button>
    </div>
  </form>
</div>

input.sass

@import '../main.sass'

form
  padding: 15px

input
  font-family: $sans-serif
  font-weight: $normal
  color: $primary-text
  margin: 10px
  padding: 5px
  border: 4px solid
  border-radius: 4px

button
  font-family: $sans-serif
  font-weight: $bold
  background-color: $primary-button
  border: 4px solid transparent
  border-radius: 4px
  margin: 10px
  padding: 5px

main.sass

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900')
/* font families */
$sans-serif: 'Lato', sans-serif

/* font weights */
$light: 300;
$normal: 400;
$semibold: 700;
$bold: 900

/* colors */
$primary-background: #ffffff
$primary-text: #1f1235
$primary-button: #ff6e6c

Are there any CSS-only methods to take back control of styling this field?

Answer 1

There is a link on css-tricks.com that works. You can adjust the colors to your liking but at least it's a start in the right direction.

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: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}