使用HTML/CSS替代浏览器表单填充和输入高亮显示

我有两个基本表单——登录和注册，都在同一页上。现在，我对登录表单自动填充没有问题，但是注册表单也自动填充，我不喜欢它

另外，表单样式有一个黄色背景，我无法覆盖它，我不想使用内联CSS来覆盖它。我该怎么做才能使它们不再被涂成黄色（可能）自动填充？提前谢谢

<form autocomplete="off">

---

几乎所有现代浏览器都会尊重这一点。

您还可以将表单元素的name属性更改为生成的内容，以便浏览器不会跟踪它。然而，如果请求url相同，Firefox2.x+和google chrome似乎没有太多问题。尝试为注册表单添加salt请求参数和salt字段名称

---

然而，我认为autocomplete=“off”仍然是最好的解决方案：）

从HTML5开始，您可以禁用自动完成功能（通过

autocomplete=“off”

），但不能覆盖浏览器的突出显示。您可以尝试在CSS中混用

：：selection

（大多数浏览器需要供应商前缀才能正常工作），但这可能对您也没有帮助

---

除非浏览器供应商专门实现了供应商特定的覆盖方式，否则您无法对已经打算为用户覆盖站点样式表的样式执行任何操作。这些通常在应用样式表后应用，并忽略

！重要信息

也将覆盖。

您链接到的屏幕截图显示WebKit正在使用选择器

输入：-WebKit autofill

，用于这些元素。你试过把这个放进你的CSS吗

input:-webkit-autofill {
    background-color: white !important;
}

---

如果这不起作用，那么可能什么都不会起作用。突出显示这些字段是为了提醒用户，这些字段已自动填充了私人信息（如用户的家庭地址），可以认为允许页面隐藏会带来安全风险。

表单元素有一个

自动完成

属性，您可以将该属性设置为

关闭

。从CSS开始，

！重要信息

属性后的指令防止其被重写：

background-color: white !important;

只有IE6不明白

---

如果我误解了您的意思，您还可以使用

大纲

属性。

对于自动完成，您可以使用：

<form autocomplete="off">

1） 由于#id样式甚至比.class样式更重要，因此以下可能会起作用：

2） 如果这不起作用，您可以尝试通过javascript编程设置样式

$("input[type='text']").bind('focus', function() {
   $(this).css('background-color', 'white');
});

<强> 3）如果这不起作用，你就注定要失败：-考虑一下： 这不会隐藏黄色，但会使文本再次可读。

input:-webkit-autofill {
        color: #2a2a2a !important; 
    }

4）css/javascript解决方案：

css:

以下javascript必须在加载时运行：

function loadPage()
{
    if (document.login)//if the form login exists, focus:
    {
        document.login.name.focus();//the username input
        document.login.pass.focus();//the password input
        document.login.login.focus();//the login button (submitbutton)
    }
}

例如：

---

我见过谷歌工具栏的自动完成功能被javascript禁用。它可能与其他一些自动填充工具一起工作；我不知道它是否有助于浏览器内置的自动完成

<script type="text/javascript"><!--
  if(window.attachEvent)
    window.attachEvent("onload",setListeners);

  function setListeners(){
    inputList = document.getElementsByTagName("INPUT");
    for(i=0;i<inputList.length;i++){
      inputList[i].attachEvent("onpropertychange",restoreStyles);
      inputList[i].style.backgroundColor = "";
    }
    selectList = document.getElementsByTagName("SELECT");
    for(i=0;i<selectList.length;i++){
      selectList[i].attachEvent("onpropertychange",restoreStyles);
      selectList[i].style.backgroundColor = "";
    }
  }

  function restoreStyles(){
    if(event.srcElement.style.backgroundColor != "")
      event.srcElement.style.backgroundColor = "";
  }//-->
</script>

---

为什么不把它放在css中：

input --webkit-autocomplete {
  color: inherit;
  background: inherit;
  border: inherit;
}

那会解决你的问题。虽然这确实会引起可用性问题，因为现在用户看不到表单是按照他/她习惯的方式自动填写的

---

[编辑]在发布这篇文章后，我看到已经给出了类似的答案，并且您评论说它不起作用。我不太明白为什么，因为当我测试它时它确实起作用了。

如果它在输入字段中，您试图“取消黄色”

用css设置背景色。。。比如说#ccc（浅灰色）

Add value=“sometext”，它临时用“sometext”填充字段

（可选）添加一点javascript，以便在放入真实文本时使“sometext”变得清晰

所以，它可能看起来像这样：

<input id="login" style="background-color: #ccc;" value="username"
    onblur="if(this.value=='') this.value='username';" 
    onfocus="if(this.value=='username') this.value='';" />

这里真正的问题是Webkit（Safari、Chrome等）有一个bug。当页面上有多个[form]时，每个[form]都有[input type=“text”name=“foo”…（即属性“name”的值相同），那么当用户返回页面时，自动填充将在页面上第一个[form]的输入字段中完成，而不是在发送的[form]中完成。第二次，下一个[表格]将自动填写，依此类推。只有具有相同名称的输入文本字段的[form]才会受到影响

这应该向Webkit开发人员报告

Opera自动填充右侧[表单]

Firefox和IE不会自动填充

所以，我再说一次：这是Webkit中的一个bug。
在尝试了很多东西之后，我找到了可以工作的解决方案，这些解决方案将自动填充字段去掉，并将它们替换为重复的。为了不丢失附加事件，我提出了另一个（有点冗长）解决方案

在每个“输入”事件中，它都会迅速将“更改”事件附加到所有相关的输入。它测试它们是否已自动填充。如果是，则发送一个新的文本事件，该事件将诱使浏览器认为该值已被用户更改，从而允许删除黄色背景

var initialFocusedElement = null
  , $inputs = $('input[type="text"]');

var removeAutofillStyle = function() {
  if($(this).is(':-webkit-autofill')) {
    var val = this.value;

    // Remove change event, we won't need it until next "input" event.
    $(this).off('change');

    // Dispatch a text event on the input field to trick the browser
    this.focus();
    event = document.createEvent('TextEvent');
    event.initTextEvent('textInput', true, true, window, '*');
    this.dispatchEvent(event);

    // Now the value has an asterisk appended, so restore it to the original
    this.value = val;

    // Always turn focus back to the element that received 
    // input that caused autofill
    initialFocusedElement.focus();
  }
};

var onChange = function() {
  // Testing if element has been autofilled doesn't 
  // work directly on change event.
  var self = this;
  setTimeout(function() {
    removeAutofillStyle.call(self);
  }, 1);
};

$inputs.on('input', function() {
  if(this === document.activeElement) {
    initialFocusedElement = this;

    // Autofilling will cause "change" event to be 
    // fired, so look for it
    $inputs.on('change', onChange);
  }
});

用一个“强大”的内部阴影欺骗它：

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

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px white inset;/*your box-shadow*/
    -webkit-text-fill-color: #333;
} 

这解决了Safari和Chrome上的问题

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}

添加此CSS规则，黄色背景色将消失。：）

适用于所有浏览器的简单javascript解决方案：

setTimeout(function() {
    $(".parent input").each(function(){
        parent = $(this).parents(".parent");
        $(this).clone().appendTo(parent);   
        $(this).attr("id","").attr("name","").hide();
    }); 
}, 300 );

克隆输入、重置属性和隐藏原始输入。
iPad需要超时
有时浏览器上的自动完成功能在代码位于
元素时仍然会自动完成

我也试着把它放到
元素中，效果更好

<form autocomplete="off">  AND  <input autocomplete="off">

和

但对该属性的支持正在停止，请阅读



我发现的另一个解决方法是在输入字段中去掉占位符，表明它是电子邮件、用户名或电话字段（即“您的电子邮件”、“电子邮件”等）


这使得浏览器不知道它是什么类型的字段
<input id="login" style="background-color: #ccc;" value="username"
    onblur="if(this.value=='') this.value='username';" 
    onfocus="if(this.value=='username') this.value='';" />

var initialFocusedElement = null
  , $inputs = $('input[type="text"]');

var removeAutofillStyle = function() {
  if($(this).is(':-webkit-autofill')) {
    var val = this.value;

    // Remove change event, we won't need it until next "input" event.
    $(this).off('change');

    // Dispatch a text event on the input field to trick the browser
    this.focus();
    event = document.createEvent('TextEvent');
    event.initTextEvent('textInput', true, true, window, '*');
    this.dispatchEvent(event);

    // Now the value has an asterisk appended, so restore it to the original
    this.value = val;

    // Always turn focus back to the element that received 
    // input that caused autofill
    initialFocusedElement.focus();
  }
};

var onChange = function() {
  // Testing if element has been autofilled doesn't 
  // work directly on change event.
  var self = this;
  setTimeout(function() {
    removeAutofillStyle.call(self);
  }, 1);
};

$inputs.on('input', function() {
  if(this === document.activeElement) {
    initialFocusedElement = this;

    // Autofilling will cause "change" event to be 
    // fired, so look for it
    $inputs.on('change', onChange);
  }
});

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

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px white inset;/*your box-shadow*/
    -webkit-text-fill-color: #333;
} 

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

setTimeout(function() {
    $(".parent input").each(function(){
        parent = $(this).parents(".parent");
        $(this).clone().appendTo(parent);   
        $(this).attr("id","").attr("name","").hide();
    }); 
}, 300 );

<form autocomplete="off">  AND  <input autocomplete="off">

<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />

$(window).load(function() {
    setTimeout(function() {
        $('input:-webkit-autofill')
            .val('')
            .css('-webkit-box-shadow', '0 0 0px 1000px white inset')
            .attr('readonly', true)
            .removeAttr('readonly')
        ;
    }, 50);
});

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

<input class="input input-xxl input-watery" type="text" name="password"/>

'focusin input[name=password]': 'onInputPasswordFocusIn',

if (e.currentTarget.value === '') {
    $(e.currentTarget).attr('type', 'password');
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #2d2d2d inset !important;
    -webkit-text-stroke-color: #e7e8eb !important;
    -webkit-text-fill-color: #e7e8eb !important;
}

input:-webkit-autofill, 
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
textarea:-webkit-autofill, 
textarea:-webkit-autofill:hover, 
textarea:-webkit-autofill:focus, 
select:-webkit-autofill, 
select:-webkit-autofill:hover, 
select:-webkit-autofill:focus, 
input:-internal-autofill-selected {
    -webkit-text-fill-color: #000;
    background: #fff !important;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0%), inset 0 0 0 100px #fff;
}