用 HTML/CSS 覆盖浏览器表单填充和输入高亮显示

我有两个基本的表格: 登录和注册，都在同一个页面。现在，我没有问题的迹象在表格自动填写，但是注册表格自动填写，以及，我不喜欢它。

此外，表单样式得到一个黄色的背景，我不能管理覆盖，我不想使用内联 CSS 这样做。我该怎么做才能让它们不再是黄色的 以及(可能)自动灌装？

227966 次浏览
小开 
<form autocomplete="off">

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

小开

还可以将表单元素的 name 属性更改为生成的属性，以便浏览器不会跟踪它。然而，火狐2。X + 和 google chrome 似乎没有太多的问题，如果请求网址是相同的。尝试为注册表单添加一个 salt 请求参数和一个 salt 字段名称。

但是我认为自动补全 = “关闭”仍然是最好的解决方案:)

小开

您可以禁用自动完成作为 HTML5(通过 autocomplete="off") ，但您无法覆盖浏览器的突出显示。您可以尝试在 CSS 中修改 ::selection(大多数浏览器需要一个供应商前缀才能正常工作) ，但这可能也不会对您有帮助。

除非浏览器供应商特别实现了一种特定于供应商的方式来覆盖它，否则您不能对这种已经打算为用户覆盖站点样式表的样式做任何事情。这些通常在应用样式表之后应用，并忽略 ! important重写。

小开

您链接到的屏幕快照显示 WebKit 对这些元素使用选择器 input:-webkit-autofill。你试过把这个放进你的 CSS 里吗？

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

如果这都不管用，那就没什么能管用了。突出显示这些字段是为了提醒用户它们已经被自动填充了私有信息(比如用户的家庭地址) ，并且可以认为允许页面隐藏会带来安全风险。

小开

form元素有一个可以设置为 off的 autocomplete属性。在 CSS 中，属性后面的 !important指令可以防止它被覆盖:

background-color: white !important;

只有 IE6不理解它。

如果我误解了您的意思，还有一个 outline属性，您可能会发现它很有用。

小开
最佳答案

你可使用以下连结:

<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 解决方案:

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)由 给你:

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

我见过 Google 工具栏的自动补全功能被 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;
}

这应该能解决你的问题。虽然它确实引起了一个可用性问题，因为现在用户无法看到表单是以他/她习惯的方式自动填充的。

[编辑]发布这个之后，我看到一个类似的答案已经给了 还有，你评论说它不工作。我不太明白为什么，因为我测试的时候它确实起作用了。

小开

如果它在输入框中，你想“取消黄色”..。

  1. 使用 css 设置背景色... 比如 # ccc (浅灰色)。
  2. Add value = “ somtext”，它将在字段中临时填充“ somtext”
  3. (可选)添加一个小的 javascript，当你把真正的文本放进去的时候，可以清楚地看到“ some text”。

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

<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。当页面上有多个[表单]时，每个都有一个[ input type = “ text”name = “ foo”... ](也就是说，属性‘ name’的值是相同的) ，那么当用户返回到页面时，自动填充将在页面上 FIRST [ form ]的输入字段中完成，而不是在发送的[ form ]中完成。第二次，将自动填写 NEXT [表单] ，依此类推。只有具有相同名称的输入文本字段的[ 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 规则，黄色背景色将消失。 :)

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

针对所有浏览器的简单 javascript 解决方案:

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

克隆输入，重置属性并隐藏原始输入。 IPad 需要暂停

小开

有时浏览器上的自动完成仍然自动完成，当你只有代码在 <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

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

小开

由于浏览器会搜索密码类型字段，另一个解决方案是在表单的开头包含一个隐藏字段:

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

随时发表评论，我打开所有的改进，如果你发现一些。

小开

经过2个小时的搜索，似乎谷歌浏览器仍然覆盖黄色以某种方式，但我找到了修复。它也适用于悬停、聚焦等。所有您需要做的就是添加 !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;
}

这将完全消除黄色从输入字段

小开

现代浏览器不支持自动完成关闭。我发现解决自动补全问题最简单的方法是使用 HTML 和 JS 进行一些跟踪。 首先要做的是将 HTML 中的输入类型从“ password”改为“ text”。

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

自动完成在加载窗口后启动。没关系。但是，当您的字段类型不是“ password”时，浏览器不知道它必须完成哪些字段。因此，在表单字段上不会有自动完成。

然后，将事件焦点绑定到密码字段，例如，在 Backbone 中:

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

在 onInputPasswordFocusIn中，只需简单地将字段类型更改为 password，检查如下:

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

就是这样！

UPD: 这个东西不能用于禁用的 JavaSciprt

UPD 在2018年。还发现了一些有趣的把戏。将 readonly 属性设置为 input 字段，并在焦点事件上删除它。首先防止浏览器自动填充字段，其次将允许输入数据。

小开

请在输入标记中尝试使用 autocomplete = “ none”

这对我有用

小开

我还必须将文本颜色更改为较暗的颜色(参见 StackOverflow 深色主题颜色)。

于是，最终出现了@Tam ás Pap、@MCBL 和@don 的混合解决方案:

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-background-clip: text !important;
}

小开

您可以使用 :-webkit-autofill对自动填充的输入设置样式

即使在带有 webkit 前缀的 Firefox 中！

要更改背景颜色，有一个方框阴影技巧。
对于 Firefox，你需要额外的 filter:none。

:-webkit-autofill {
filter:none; /* needed for firefox! */
box-shadow: 0 0 0 100px rgba(38, 163, 48, 0.212) inset;
}
小开

让我们使用一个小的 css 黑客:

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

我可以用这种方法去掉自动填充的颜色:

  // Workaround to remove autofill color from inputs
input, select {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
-webkit-background-clip: text !important;
background-clip:  text !important;
}

就我所测试的而言，这在 iOS 平台的 Safari 和 Chrome 以及 Android 平台的 Chrome 上都是可行的。

小开

接受的答案可能是一个很好的答案为特定的情况下，但我使用的角度材料与透明的背景，最重要的是，< 输入 > 领域不是“中心材料领域”与花哨的边界等。

我做了这个修改的解决方案，只是强制在任何自动填充伪元素上进行一个非常长的转换，所以除非用户设法在同一个页面上停留相当长的1000000000秒左右，否则属性的变化甚至不会引起注意！

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 {
transition: all 10000000s;
}
小开

只是共享从 Wahmal的 这个伟大的解决方案的任何人谁想要一个透明的背景为他们的输入。通过添加从默认输入样式到用于自动填充的 webkit 样式的长时间延迟来绕过所有恼人的 webkit 默认样式。

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-transition-delay: 9999s;
transition-delay: 9999s;
}


提交答案