覆盖浏览器表单填写和输入与HTML/CSS

109

突出我有2种基本形式 - 登录并注册，都在同一页上。现在，我在填写表单自动填写~~时没有问题，但注册表单自动填写也是如此，我不喜欢它。~~覆盖浏览器表单填写和输入与HTML/CSS

而且，形式风格得到黄色背景，我不能管理重写，我不希望使用内联CSS这样做。我能做些什么来使他们不再被染成黄色~~和（可能）自动填充~~？提前致谢！

2010-02-25 casraf

你真的问两个问题在这里工作：如何禁用表单自动填充？ -AND-如何在表单自动填充功能启用时覆盖黄色背景？在我阅读以下答案中的所有评论之前，这并不清楚。你可能想考虑编辑你的问题（特别是因为你已经尽可能提供赏金）。 – benzado 2010-03-07 00:04:14

你是对的，编辑。或者它的一个懒惰版本。 – casraf 2010-03-07 01:40:49

作为该表单的用户，我不愿意让我的可用性因您的视觉偏好而受到阻碍，方法是强制自动完成并突出显示。让用户关闭它，而不是你。单独留下我的浏览体验。 – Byran 2010-03-09 17:16:23

126

为自动完成，你可以使用：

<form autocomplete="off">

关于着色问题：

从你的截图，我可以看到的是WebKit的生成以下样式：

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

1 ）作为＃id-styles比.class风格更重要，以下可能作品：

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

2）如果这是行不通的，你可以尝试通过JavaScript编程

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

3）设定的风格，如果这是行不通的， ~~你注定:-)~~ 考虑这个：这不会隐藏黄色，但会使文本再次可读。

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

4）的CSS/JavaScript的溶液：

CSS：

input:focus { 
    background-position: 0 0; 
}

和下面的JavaScript有要运行的onload：

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) 
    } 
}

例如：

<body onload="loadPage();">

好运:-)

5）如果没有上述工作的尝试删除输入元素，克隆它们，然后将克隆的元素后面的页面（可在Safari浏览器6.0.3）上：

<script> 
function loadPage(){ 

    var e = document.getElementById('id_email'); 
    var ep = e.parentNode; 
    ep.removeChild(e); 
    var e2 = e.cloneNode(); 
    ep.appendChild(e2); 

    var p = document.getElementById('id_password'); 
    var pp = p.parentNode; 
    pp.removeChild(p); 
    var p2 = p.cloneNode(); 
    pp.appendChild(p2); 
} 

document.body.onload = loadPage; 
</script>

6）从here：

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); 
     }); 
    }); 
}

来源

2010-03-10 11:54:14

（1）不起作用。当我回家时，我会尝试（2）;希望JS能够重写这个;谢谢:) – casraf 2010-03-11 09:35:08

4工作。良好的最后一分钟的工作lol – casraf 2010-03-11 23:53:56

（4）绝对消除黄色：焦点边界。 – ruruskyi 2012-08-16 12:07:34

<form autocomplete="off">

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

来源

2010-02-25 22:21:04

真棒，但它只解决了不太重要的问题;我怎样才能保持自动完成，但失去了风格（http://prntscr.com/4hkh）webkit推下喉咙？ o：谢谢 – casraf 2010-02-25 22:28:52

实际上，它应该两者兼而有之。该框只会变成黄色，让你知道chrome/safari/ff已经用你的密码自动填充了它。如果你告诉它不填充，它将不会有机会着色。 – 2010-02-25 23:28:58

+10

是的，但看看我说的：“我怎样才能保持自动完成，但失去了风格** webkit推” – casraf 2010-02-26 00:07:32

你也可以改变你的表单元素的name属性的东西产生，这样浏览器就不会跟踪它。但是，如果请求url是相同的，firefox 2.x +和google chrome似乎没有太多问题。尝试基本上为注册表单添加盐请求参数和盐字段名称。

不过我觉得自动完成=“关闭”仍然是顶级的解决方案:)

来源

2010-02-25 22:26:06

可以禁用自动完成如HTML5（通过autocomplete="off"），但你不能重写浏览器的高亮显示。您可以尝试在CSS中使用::selection（大多数浏览器都需要供应商前缀才能工作），但这可能对您也无济于事。

除非浏览器供应商具体实现覆盖它的供应商特定的方式，你不能做那些已经打算重写网站的样式表的用户风格等什么。这些通常在应用样式表后应用并忽略! important覆盖。

来源

2010-03-06 23:58:27

所以我基本上拧了D： – casraf 2010-03-07 19:59:22

@henasraf是的，是的，你是。 – 2010-03-07 23:42:06

您链接到的截图说，WebKit是使用选择input:-webkit-autofill这些元素。你有没有尝试把这个在你的CSS？

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

如果这不起作用，那么没有什么可能。这些字段会突出显示，以提醒用户他们已经使用私人信息（例如用户的家庭地址）进行自动填充，并且可能会认为允许隐藏页面会导致安全风险。

来源

2010-03-07 00:02:02 benzado

是的，在我发布屏幕截图之前试过了。不工作。 – casraf 2010-03-07 01:36:59

form元素具有autocomplete属性，您可以将其设置为off。由于CSS的属性后!important指令保持它被重写：

background-color: white !important;

只有IE6不明白。

如果我误解你了，还有还有，你能找到有用的outline财产。

来源

2010-03-07 00:02:19 zneak

Chrome自动填充输入字段时似乎忽略！重要！ – Torandi 2011-01-25 15:36:01

@Torandi可能是由于用户代理样式表。用户代理样式表的设置应该最后应用，除非它具有'！important'指令，在这种情况下，它优先于其他所有内容。你应该检查你的用户代理样式表（尽管我不知道在哪里可以找到它）。 – zneak 2011-01-25 23:29:39

我见过禁用了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>

来源

2010-03-11 00:24:59 Adam

这不适合我使用Chrome 19.0.1084.46 – Micah 2012-05-17 18:23:18

-3

为什么不干脆把这个在你的CSS：

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

这应该照顾你的问题。尽管它确实引发了可用性问题，因为现在用户无法看到表单是以他/她习惯的方式自动填充的。

发表后，我看到类似的答案已经给出和，你说它没有工作。我不太明白为什么，因为它在测试时确实有效。

来源

2010-03-11 16:18:14 Kris

不适用于Chrome和Safari浏览器。样式是'input：-webkit-autofill'和'input --webkit-autocomplete'根本不存在 – ruruskyi 2012-08-16 12:24:09

你确定它确实有效吗？ oO – 2013-11-12 04:36:37

@EliseuMonar：我很确定我没有说谎，但不记得我如何或在哪里测试它的细节。代码本身可能是从内存中键入的，而不是复制/粘贴，所以自动完成与自动填充？我不知道。 – Kris 2013-11-12 10:00:36

如果它在输入字段你想“非黄” ......

设置背景色的CSS ...比方说#CCC（浅灰色）。
添加值=“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='';" />

来源

2011-01-28 04:47:32 whitehorse

-2

这里真正的问题是，WebKit的（Safari浏览器，Chrome浏览器...）有一个bug。当页面上有多个[表单]时，每个表单都有一个[input type =“text”name =“foo”...]（即与属性'name'相同的值），那么当用户返回自动填充将在页面上的FIRST [form]的输入字段中完成，而不是在发送的[form]中完成。第二次，NEXT [表单]将自动填充，等等。只有带有SAME名称的输入文本字段的[form]会受到影响。

这应该报告给Webkit开发人员。

Opera自动填充右边的[表格]。

Firefox和IE不会自动填充。

所以，我再说一遍：这是Webkit中的一个bug。

来源

2012-02-01 10:58:57

在尝试了很多事情之后，我发现了一些工作解决方案，它们会自动填充自动填充的字段并将其替换为重复的字段。不要松动附加事件，我想出了另一个（有点冗长）的解决方案。

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

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); 
    } 
});

来源

2012-12-03 20:43:09

149

与 “强” 内阴影绝招吧：

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: /*your box-shadow*/,0 0 0 50px white inset; 
    -webkit-text-fill-color: #333; 
}

来源

2012-12-13 12:35:37

这真的很聪明。 :) – 2013-02-22 16:13:07

（顺便说一句，任何人怀疑，它似乎工作得很好。） – 2013-02-22 16:48:16

这是我最喜欢的CSS技巧。 – LandonSchropp 2013-07-12 07:16:44

这修正两个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); 
}

来源

2013-01-18 00:28:01 Arjan

我相信这样做会不会有点苛刻，每次做这个50次？我知道它会起作用，不会太慢。但似乎有点太多了。 – 2013-08-09 07:25:03

添加这个CSS规则，黄色背景颜色disapear。 :)对所有的浏览器

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

来源

2013-10-17 11:56:45 MCBL

这是在这里工作的唯一答案！ – sd1sd1 2014-11-01 07:14:17

不会消失，而是变成白色 – Attenzione 2015-05-28 09:27:18

这对我有用 - 谢谢！（尽管我需要将白色换成我实际需要的颜色） – jennEDVT 2016-07-05 14:21:29

简单的JavaScript解决方案：

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

克隆输入，重置属性和隐藏原始输入。 iPad需要超时

来源

2014-04-25 09:24:18 Mite

有时当您在<form>元素中拥有代码时，浏览器上的自动完成功能仍会自动完成。

我试着把它放在<input>元素中，它效果更好。

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

这个属性是但停止支持，请阅读 https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1

https://bugzilla.mozilla.org/show_bug.cgi?id=956906

另一种解决办法，我已经发现的是取出暗示输入字段内占位符它是电子邮件，用户名或电话字段（即“您的电子邮件”，“电子邮件”等）

enter image description here

这使得浏览器不知道它是什么类型的字段，因此不会尝试自动完成它。

来源

2014-07-30 22:24:52

我喜欢这个，大多数人都不会意识到整个表单没有被填充在页面重新加载（例如长文本区域）上，而是允许开发人员阻止某些元素被填充（例如银行卡号）。令人讨厌的是，对这个属性的支持正在停止 – 2014-08-14 12:01:07

由于密码类型字段浏览器搜索，另一个解决办法是包括你的开端一个隐藏字段：

来源

2014-10-13 03:25:35

我看了这么多线程和尝试的代码想这么多。收集所有的东西之后，唯一的办法，我发现干净清空登录名和密码字段并重置其背景，以白色为以下几点：

$(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); 
});

随意评论，我打开所有的增强，如果你找到一些。

来源

2016-08-08 14:39:43 TwystO

经过2个小时的搜索，似乎Google Chrome仍然以某种方式覆盖了黄色，但我找到了修复程序。它也可以用于悬停，聚焦等。您只需要将!important添加到它。

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; 
}

这将完全从输入字段

来源

2016-11-03 09:31:08 don

它适用于我没有1000像素的图像，只有0无处不在，-webkit-box-shadow：0 0 0 0 white inset！important; – 2017-06-15 10:19:53

自动完成关闭不被现代浏览器支持祛黄的颜色。解决自动完成问题的最简单方法是使用HTML和JS。首先要做的是将HTML中输入的类型从“密码”更改为“文本”。

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

窗口加载后启动自动完成。没关系。但是当您的字段类型不是“密码”时，浏览器不知道它必须填写哪些字段。所以，表单字段上不会自动完成。

之后，将事件焦点绑定到密码字段，例如。在骨干：

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

在onInputPasswordFocusIn，只是改变你的字段的类型的密码，通过简单的检查：

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

That`s吧！

UPD：这件事情不会禁用JavaSciprt

来源

2017-01-18 12:41:05 volodymyr3131

自动完成*是标准的一部分，但它的使用和实现可能会有所不同。另外，在IE中改变输入类型的方式失败了，这就是jQuery阻止它的原因，但是如果你打算支持IE https://developer.mozilla.org/en-US/docs/Web/Security/，通常这不是一个好主意。 Securing_your_site/Turning_off_form_autocompletion＃The_autocomplete_attribute_and_login_fields – casraf 2017-01-18 13:04:17

@casraf对不起，它是非标准的一部分，但它并不适用于所有现代浏览器，因此它不会完成它的发明。在EDGE中，它工作正常，关于以前的版本不能告诉任何东西（ – volodymyr3131 2017-01-18 13:56:33

真的，它并没有到处实现。问题依然存在 - 取决于你想支持IE多远 - 在11之前，我不相信你可以改变输入类型如果你不担心旧版本，那么你可以使用'autocomplete = off'，因为它在FF，Chrome中运行一段时间，以及IE在以前版本左右运行 – casraf 2017-01-18 15:13:04

覆盖浏览器表单填写和输入与HTML/CSS

回答

相关问题