Прибираємо жовтий фон у input з autocomplete в браузерах

Front-end 02.05.2015

1 561

< 1 min read

Ви, мабуть, помічали, що якщо колись уже вводили дані у форму, то наступного разу браузер пропонує заповнити поля раніше введеними значеннями. І ось, коли ви обираєте щось із цього випадаючого списку — поле вводу стає жовтого кольору. Іноді це може заважати. В інтернеті є багато способів позбутися цього ефекту, але, на жаль, по-перше, вони не завжди працюють, а по-друге, деякі з них доволі громіздкі.

І тут допоможе просте css-правило:


input:-webkit-autofill {
    -webkit-box-shadow: 0px 0px 0px 50px rgba(255, 255, 255, 1) inset; /* Цвет фона */
    -moz-box-shadow: 0px 0px 0px 50px rgba(255, 255, 255, 1) inset;
    box-shadow: 0px 0px 0px 50px rgba(255, 255, 255, 1) inset; 
    -webkit-text-fill-color: #9196A1 !important; /* цвет текста */
    color: #9196A1 !important; /* цвет текста */
}

Ми задаємо велику внутрішню тінь для input з кольором бажаного фону.

Якщо ти на Tailwind, це кладуть у глобальні стилі @layer base:


@layer base {
    input:-webkit-autofill {
        -webkit-box-shadow: 0px 0px 0px 50px rgba(255, 255, 255, 1) inset; /* Цвет фона */
        -moz-box-shadow: 0px 0px 0px 50px rgba(255, 255, 255, 1) inset;
        box-shadow: 0px 0px 0px 50px rgba(255, 255, 255, 1) inset; 
        -webkit-text-fill-color: #9196A1 !important; /* цвет текста */
        color: #9196A1 !important; /* цвет текста */
    }
}