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

Question

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

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

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

Answer 1

Решение на основе jquery, оно не идеальное, но работает. 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);
    });
  });
}

Answer 2

Возможный обходной путь на данный момент - установить «сильную» внутреннюю тень:

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
}

Answer 3

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

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

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