Как предотвратить вебкит от создания пользовательских форм css, уродливых с автозаполнением (без его отключения)?

У меня есть окно входа в систему, где я хочу, чтобы браузер помнил сохраненный пароль, если пользователь решил это сделать, но когда пароль действительно сохраняется, форма начинает выглядеть действительно уродливо:

enter image description here

Есть ли способ переопределить это поведение? В Firefox и IE это выглядит нормально. В Chrome и Opera это выглядит очень плохо.

И да, я знаю, что "remmember" ошибочно написано: P

+2
источник поделиться
3 ответа

Из изображения видно, что вы используете изображения для дизайна этого поля ввода. Вы должны иметь возможность использовать радиус границы, чтобы получить желаемый эффект без использования изображений. Посмотрите http://inspectelement.com/didyouknow/rounded-corners-on-input-fields-in-almost-all-modern-browsers/ для примера.

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

Для браузеров, которые не имеют радиуса границы, вы можете использовать изображения. Поскольку эта проблема существует только в Chrome, а Chrome поддерживает граничный радиус, он должен работать. Проверьте http://www.modernizr.com/ за то, что вы можете изящно унизиться в зависимости от того, какие функции HTML5/CSS3 доступны.

0
источник

jQuery основан на js-решении, он не идеален, но работает. Chrome изменит стиль, а js вернет его в ваши стили.

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
  $(window).load(function(){
    $('input:-webkit-autofill').each(function(){
      var text = $(this).val();
      var name = $(this).attr('name');
      $(this).after(this.outerHTML).remove();
      $('input[name=' + name + ']').val(text);
    });
  });
}
0
источник

Возможным обходным путем на данный момент является установка "сильной" внутренней тени:

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
}
0
источник

Посмотрите другие вопросы по меткам или Задайте вопрос