这是这个任务的复杂解。

(function($){ if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { $('input, select').on('change focus', function (e) { setTimeout(function () { $.each( document.querySelectorAll('*:-webkit-autofill'), function () { var clone = $(this).clone(true, true); $(this).after(clone).remove(); updateActions(); }) }, 300) }).change(); } var updateActions = function(){};// method for update input actions updateActions(); // start on load and on rebuild })(jQuery) *:-webkit-autofill, *:-webkit-autofill:hover, *:-webkit-autofill:focus, *:-webkit-autofill:active { /* use animation hack, if you have hard styled input */ transition: all 5000s ease-in-out 0s; transition-property: background-color, color; /* if input has one color, and didn't have bg-image use shadow */ -webkit-box-shadow: 0 0 0 1000px #fff inset; /* text color */ -webkit-text-fill-color: #fff; /* font weigth */ font-weight: 300!important; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" name="name" autocomplete="name"/> <input type="email" name="email" autocomplete="email"/>

谢谢便雅悯!

Mootools解决方案有点棘手，因为我不能通过使用$('input:-webkit-autofill')来获取字段，所以我使用的是以下内容:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {

  window.addEvent('load', function() {
    setTimeout(clearWebkitBg, 20);
    var elems = getElems();
    for (var i = 0; i < elems.length; i++) {
      $(elems[i]).addEvent('blur', clearWebkitBg);
    }
  });
}
function clearWebkitBg () {
  var elems = getElems();
  for (var i = 0; i < elems.length; i++) {
    var oldInput = $(elems[i]);
    var newInput = new Element('input', {
      'name': oldInput.get('name'),
      'id': oldInput.get('id'),
      'type': oldInput.get('type'),
      'class': oldInput.get('class'),
      'value': oldInput.get('value')
    });
    var container = oldInput.getParent();
    oldInput.destroy();
    container.adopt(newInput);
  }
}
function getElems() {
  return ['pass', 'login']; // ids
}

我放弃!

由于没有办法用自动补全来改变输入的颜色，我决定禁用所有这些webkit浏览器用jQuery。是这样的:

if (/webkit/.test(navigator.userAgent.toLowerCase())) {
    $('[autocomplete="on"]').each(function() {
        $(this).attr('autocomplete', 'off');
    });
}

SASS

input:-webkit-autofill

  &,
  &:hover,
  &:focus,
  &:active
    transition-delay: 9999s
    transition-property: background-color, color

两年后线复活。我围绕着这个问题工作了几天，发现了一个简单的技巧来防止这个丑陋的自动完成功能:

只需添加一个随机字符串来形成目标，如<form action="site.com/login.php?random=123213">

它工作在最新的chrome版本34.0.1847.137

更新:如果它不起作用，给动作奇怪的协议，比如<form id="test" action="xxx://">，然后用javascript填充这个区域:

$('#test').attr('action', 'http://example.site/login.php');

更新2:仍然有问题，我决定完全删除<形式>标签和post变量通过jquery。它更容易。

我有一个纯CSS解决方案，使用CSS过滤器。

filter: grayscale(100%) brightness(110%);

灰度滤镜将黄色替换为灰色，然后亮度删除灰色。

看到CODEPEN