使用HTML / CSS覆盖浏览器表单填充和input高亮显示
我有两个基本的forms – login和注册，在同一页上。 现在，我填写表单自动填写没有问题， 但registry单自动填充，我不喜欢它。
此外，窗体样式得到一个黄色的背景，我不能设法重写，我不想使用内联CSS来这样做。 我能做些什么来使他们不要被染成黄色 和（可能）自动填充 ？ 提前致谢！
对于自动完成，您可以使用：
<form autocomplete="off"> 关于着色问题：
从你的截图中，我可以看到webkit生成以下样式：
input:-webkit-autofill { background-color: #FAFFBD !important; }
1）＃id风格比.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解决scheme：
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）如果以上任何一项工作都没有尝试删除input元素，请克隆它们，然后将克隆的元素放回到页面上（在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）从这里 ：
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); }); }); }
用一个“强”的阴影来欺骗它：
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; }
添加这个CSS规则，黄色背景颜色将消失。 🙂
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }
<form autocomplete="off">
几乎所有的现代浏览器都会尊重这一点。
经过2个小时的search，似乎谷歌浏览器仍然覆盖黄色的颜色，但我find了修复。 它将工作hover，重点等。 所有你需要做的就是添加!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; }
这将完全消除input字段中的黄色
您还可以将表单元素的name属性更改为生成的内容，以便浏览器不会跟踪它。 但是，如果请求url是相同的，firefox 2.x +和google chrome似乎没有太多问题。 尝试基本上为registry单添加盐请求参数和盐字段名称。
不过，我认为自动完成=“closures”仍然是顶级的解决scheme:)
有时浏览器上的自动完成仍然会在<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
我发现的另一项工作是在input字段中取出占位符，表明它是电子邮件，用户名或电话字段（即“您的电子邮件”，“电子邮件”等）。
这使得浏览器不知道它是什么types的字段，因此不会尝试自动完成它。
您可以禁用HTML5自动完成function（通过autocomplete="off" ），但不能覆盖浏览器的高亮显示。 你可以尝试在CSS中::selection （大多数浏览器需要一个供应商前缀的工作），但是这可能也不会帮助你。
除非浏览器供应商专门实施供应商特定的覆盖方式，否则您无法对这种已经打算覆盖用户的网站样式表的样式进行任何操作。 这些通常在应用样式表后应用并忽略! important ! important覆盖也是如此。
这解决了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); }
如果它在input字段中，则试图“不发黄”…
- 用CSS设置背景颜色…让我们说#ccc（浅灰色）。
- 增加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是使用select器input:-webkit-autofill这些元素。 你有没有尝试把这个在你的CSS？
input:-webkit-autofill { background-color: white !important; }
如果这不起作用，那么没有可能。 这些字段突出显示，以提醒用户他们已经用自己的私人信息（如用户的家庭地址）自动填充，可能会被认为允许页面隐藏，这是一个安全风险。
form元素具有可以设置为off的autocomplete属性。 作为CSS的!important指令后，属性使其不被覆盖：
background-color: white !important;
只有IE6不理解它。
如果我误解了你的话，你也可以find有用的outline属性。
我已经看到谷歌工具栏的自动完成function禁用JavaScript。 它可能与其他一些自动填充工具一起工作。 我不知道它是否会帮助build立自动完成的浏览器。
<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>
在尝试了很多东西之后，我find了工作解决scheme，将自动填充的字段加上去，并用重复的replace它们。 不要松动附加的事件，我想出了另一个（有点冗长）的解决scheme。
在每个“input”事件中，它迅速将“更改”事件附加到所有涉及的input。 它testing它们是否被自动填充。 如果是的话，则派遣一个新的文本事件，诱使浏览器认为该值已被用户更改，从而允许删除黄色背景。
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); } });
所有浏览器的简单的JavaScript解决scheme
setTimeout(function() { $(".parent input").each(function(){ parent = $(this).parents(".parent"); $(this).clone().appendTo(parent); $(this).attr("id","").attr("name","").hide(); }); }, 300 );
克隆input，重置属性并隐藏原始input。 iPad需要超时
由于浏览器search密码types字段，另一个解决方法是在表单的开头添加一个隐藏字段：
<!-- unused field to stop browsers from overriding form style --> <input type='password' style = 'display:none' />
我读过这么多的线程，并尝试这么多的代码段。 收集所有的东西后，我发现干净地清空login名和密码字段，并将其背景重置为白色的唯一方式是以下几点：
$(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); });
随意评论，如果你find一些我可以打开所有的增强。
现代浏览器不支持自动完成closuresfunction。 解决自动完成的最简单的方法是find一个HTML和JS的小道。 首先要做的是将HTML中input的types从“password”改为“text”。
<input class="input input-xxl input-watery" type="text" name="password"/>
自动完成在窗口加载后启动。 没关系。 但是，当您的字段types不是“密码”时，浏览器不知道必须填写哪些字段。 所以，在表单字段上将不会自动完成。
之后，将事件焦点绑定到密码字段，例如。 在骨干：
'focusin input[name=password]': 'onInputPasswordFocusIn',
在onInputPasswordFocusIn ，只需将您的字段types更改为密码，方法如下：
if (e.currentTarget.value === '') { $(e.currentTarget).attr('type', 'password'); }
这就是它！
UPD：这个东西不适用于禁用的JavaSciprt
这里真正的问题是Webkit（Safari，Chrome，…）有一个bug。 当页面上有多个[form]时，每一个都有一个[input type =“text”name =“foo”…]（即与属性'name'相同的值），那么当用户返回自动填充将在页面上的FIRST [form]的input字段中完成，而不是在发送的[form]中完成。 第二次，NEXT [form]将被自动填充，等等。 只有具有SAME名称的input文本字段的[form]会受到影响。
这应该报告给Webkit开发者。
Opera自动填充右边的[表单]。
Firefox和IE不会自动填充。
所以，我再说一遍：这是Webkit中的一个bug。
为什么不把这个放在你的css中：
input --webkit-autocomplete { color: inherit; background: inherit; border: inherit; }
这应该照顾你的问题。 虽然它确实引发了一个可用性问题，因为现在用户看不到表单是以他/她习惯的方式自动填充的。
发布之后，我看到已经给出了类似的答案， 并且您评论说它不起作用。 我不太明白为什么，因为它在我testing时确实有效。
