Всім відомо, що якщо в Google Chrome, або будь-якому іншому браузері на движку Webkit, зберегти дані заповненої форми, то поля цієї самої форми матимуть жовтий фон, яка не перекрити навіть за допомогою! Important. Для застосування такого стилю до полів Chrome використовує спеціальне властивість -webkit-autofill, в якому вказано колір фону об'єктів. Але, чомусь, прописавши це властивість в CSS, все одно не виходить "обійти" браузер.
Перше, найпростіше, рішення:
Припустимо ми маємо форму такого виду:
Так ось, який би стиль ми не задали для цих полів, будь Webkit-браузер все одно перекриє його своєю "жовтизною". Поміркувавши, приходиш до висновку що підсвічуються тільки поля з даними резервування. А значить, відключивши можливість збереження, ми відключимо і підсвічування. Для цього, кожному полю де не потрібен "жовтий колір", необхідно присвоїти атрибут autocomplete = "off".
Після цього форма стане виглядати так:
Друге рішення - використовуємо jQuery:
В даному прикладі також немає нічого складного, але підхід в корені інший. Для початку потрібно підключити jQuery (якщо не підключений), а потім використовувати скрипт який "нав'яже" браузерам сімейства Webkit свої правила:
Дещо ще:
В "інтернетах" я зустрічав таке CSS правило:
По-суті, воно повинно працювати і вказувати стиль для заповнених полів, але на ділі, особисто у мене, цього не було жодного разу.
Резюмуючи:
Якщо зважити два рішення даної проблеми, то з абсолютно очевидною перевагою перемагає друге. По-перше, jQuery зараз використовується практично скрізь, і даний шматок коду цілком виправданий, по-друге, тенденція відключати j # 097; vascript в браузері вже зжила себе і, по-третє, ми не позбавляємося функціоналу автозаповнення, який буває дуже корисний.
Інформація про піст