Использование Chrome 81.0.4044.92 (официальная сборка) (64-разрядная версия) (группа: стабильная) в Windows с любыми сохраненными паролями при входе в систему с помощью синхронизации создает переопределение свойства input:-internal-autofill-selected моего input' с.

Продемонстрировано здесь: введите здесь описание изображения

enter image description 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

Существуют ли какие-либо методы только CSS, позволяющие вернуть контроль над стилем этого поля?

4
mburke05 13 Апр 2020 в 00:37

1 ответ

Есть ссылка на css-tricks.com это работает. Вы можете настроить цвета по своему вкусу, но, по крайней мере, это начало в правильном направлении.

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;
}
3
Beezee_Boi 13 Дек 2020 в 13:15