Как отключить стили инпута, которые задаются при выборе текста из предложенных вариантов браузера?

Question

Как отключить стили инпута, которые задаются при выборе текста из предложенных вариантов браузера?

Артур Кириллов Профи (656), на голосовании 4 месяца назад

может быть тупо звучит, но еще тупее, что переназначение этих стилей: input:-internal-autofill-selected {
appearance: menulist-button;
background-image: none !important;
background-color: light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
color: fieldtext !important;
}
ни к чем не приводит.

Дополнен 5 месяцев назад

это - input:-internal-autofill-selected {
appearance: auto !important;
background-image: inherit !important;
background-color: inherit !important;
color: inherit !important;
}
не помогает

Answer 1

AaacoB Aaac Мудрец (14181) 5 месяцев назад

мощно задвинул!

Артур КирилловПрофи (656) 5 месяцев назад

создателям браузеров лучше бы задвинули, которые суют свои стили куда не надо, тем более которые даже нельзя изменить

Answer 2

Стили, которые браузер применяет к элементам формы при автозаполнении, могут быть довольно упрямыми и не всегда поддаются изменениям через обычные CSS-правила. Это связано с тем, что браузеры используют специальные внутренние стили для управления внешним видом автозаполненных полей ввода.

Однако, есть несколько методов, которые могут помочь вам изменить эти стили:

1. Использование псевдокласса `:-webkit-autofill`, который специфичен для браузеров на движке WebKit (например, Chrome и Safari). Для Firefox используется псевдокласс `:-moz-ui-invalid`.

2. Применение `!important` к вашим стилям, чтобы попытаться переопределить стандартные стили браузера. Вы уже попробовали это, но иногда может потребоваться более специфичный селектор или другой подход к стилизации.

3. Изменение стилей через JavaScript, например, с помощью событий `input` или `change`, чтобы динамически применять стили к элементам формы.

4. Использование теневого DOM для изменения стилей внутренних элементов ввода, хотя это может быть сложно и не всегда возможно в зависимости от браузера.

Вот пример кода, который вы можете попробовать для WebKit-браузеров:

 input:-webkit-autofill, 
input:-webkit-autofill:hover,  
input:-webkit-autofill:focus,  
input:-webkit-autofill:active  { 
    transition: background-color 5000s ease-in-out 0s; 
    -webkit-text-fill-color: #000 !important; 
}

Этот код изменяет цвет текста автозаполненных полей и задерживает изменение фона, что может помочь "обойти" стандартные стили автозаполнения.

Если вы продолжаете сталкиваться с проблемами, возможно, вам придется рассмотреть альтернативные подходы к дизайну формы или использовать скрипты для более динамичного управления стилями.