如何使用HTML / CSS覆盖浏览器表单填充和输入高亮显示？
如何使用HTML / CSS覆盖浏览器表单填充和输入高亮显示？
提问于 2018-03-15 05:16:28
我有两种基本形式 - 登录和注册，都在同一页上。现在，我在填写表单自动填写方面没有问题。
另外，表单样式会得到一个黄色的背景，我无法重写，我不想使用内联CSS来这样做。我能做些什么来使他们不再被染成黄色？
回答 2
Stack Overflow用户
发布于 2018-03-15 13:28:02
对于自动完成，可以使用：
<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）
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);
});
});
}
Stack Overflow用户
发布于 2018-03-15 14:20:42
用一个“strong”的标签来渲染它：
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;
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100007632
复制相关文章
相似问题
腾讯云开发者
