Menu

Blog

Start / Blog

Zmiana żółtego tła w inputach

2017-04-08
CSS  
7_5.jpg

Jeśli pozwolisz, aby przeglądarka pamiętała co wpisujesz w pola formularzy, podczas ponownego ich wypełniania zaproponuje Ci wcześniej wpisywane dane.

To bardzo wygodne jednak w przeglądarce Google Chrome po wybraniu zapisanego uzupełnienia, kolor pól formularza zmienia się na blado żółty, co może zepsuć ogólny wygląd Twojego projektu.

W moim przypadku miałem ten problem podczas logowania się do swojego systemu zarządzania treścia "angirCMS". Dosyć raziło mnie to w oczy i psuło ogólny design mojego projektu. Postanowiłem więc to naprawić.

Ale jak zmienić wymuszone żółte tło w formularzarzu?

Aby naprawić ten błąd użyjemy przedrostka -webkit- przeznaczonego dla przeglądarki Google Chrome z elementem autozupełniania:

input:-webkit-autofill {

    -webkit-box-shadow: 0 0 0px 1000px white inset;

}

A co jeśli dodatkowo chcielibyśmy zmienić kolor tekstu?

Aby to zrobić musimy dopisać do naszego stylu css:

-webkit-text-fill-color: #333 !important;

I gotowe!

Ponieważ sam błąd dotyczy Chrome, dodanie przedrostka -webkit- rozwiązuje problem w zakresie zgodności z innymi przeglądarkami.


Szukaj na blogu