Первое, самое простое, решение:
Допустим мы имеем форму такого вида:
<form action=""> <input type="text" /> <input type="password" /> </form>
Так вот, какой бы стиль мы не задали для этих полей, любой Webkit-браузер все равно перекроет его своей "желтизной". Поразмыслив, приходишь к выводу что подсвечиваются только поля с сохраненными данными. А значит, отключив возможность сохранения, мы отключим и подсветку. Для этого, каждому полю где не нужен "желтый цвет", необходимо присвоить атрибут
autocomplete="off".После этого форма станет выглядеть так:
<form action=""> <input type="text" autocomplete="off" /> <input type="password" autocomplete="off" /> </form>
Второе решение - используем jQuery:
В данном примере также нет ничего сложного, но подход в корне иной. Для начала нужно подключить jQuery (если не подключен), а затем использовать скрипт который "навяжет" браузерам семейства Webkit свои правила:
$(document).ready(function(){
if(navigator.userAgent.toLowerCase().indexOf('chrome') >= 0){
$(window).load(function(){
$('input:-webkit-autofill').each(function(){
$(this).after(this.outerHTML).remove();
$('input[name='+$(this).attr('name')+']').val($(this).val());
});
});
}
});Кое-что еще:
В "интернетах" я встречал такое CSS правило:
input:-webkit-autofill {
color: #2a2a2a !important;
}По-сути, оно должно работать и указывать стиль для заполненных полей, но на деле, лично у меня, этого не было ни разу.
Резюмируя:
Если взвесить два решения данной проблемы, то с совершенно очевидным преимуществом побеждает второе. Во-первых, jQuery сейчас используется практически везде, и данный кусок кода вполне оправдан, во-вторых, тенденция отключать javascript в браузере уже изжила себя и, в-третьих, мы не лишаемся функционала автозаполнения, который бывает очень полезен.