覆盖HTML / CSS的浏览器填充和输入突出显示 [英] Override browser form-filling and input highlighting with HTML/CSS
问题描述
我有2种基本表单 - 登录和注册，两者都在同一页上。现在，我没有问题的登录表单自动填充，但注册表单自动填充以及，我不喜欢。
此外，窗体样式获得一个黄色背景，我不能管理覆盖，我不想使用内联CSS这样做。我可以做些什么，使他们停止着色黄色和（可能）自动填充？提前感谢自动完成
，您可以使用：
< form autocomplete =off>
关于着色问题：
从屏幕截图我可以看到webkit生成以下样式：
输入：-webkit-autofill {
background-颜色：#FAFFBD！important;
}
1）因为＃id样式比.class样式更重要，以下可以工作：
#inputId：-webkit-autofill {
background-颜色：白色！
}
2）如果不行，可以尝试设置样式通过javascript以编程方式
$（input [type ='text'] {
$（this）.css（'background-color'，'white'）;
}）;
3）如果这样不能工作， ）考虑这样：
这不会隐藏黄色，但会使文本再次可读。
code> input：-webkit-autofill {
color：＃2a2a2a！important;
}
4）css / javascript解决方案： / p>
css：
input：focus {
background-位置：0 0;
}
并且必须在onload上运行以下javascript：
function loadPage（）
{
if（document.login）//如果表单登录存在，焦点：$ b $ b {
document.login.name.focus（）; //用户名输入
document.login.pass.focus（）; //密码输入
document.login.login。 focus（）; //登录按钮（submitbutton）
}
}
eg：
< body onload =loadPage（）;>
good luck： - ）
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'）;
$ .after（this.outerHTML）.remove（）;
$（'input [name ='+ name +']'）val（text）;
}）;
} ;
}
I have 2 basic forms -- sign in and sign up, both on the same page. Now, I have no problem with the sign in form auto-filling, but the sign up form auto fills as well, and I don't like it.
Also, the form styles get a yellow background which I can't manage to override and I don't want to use inline CSS to do so. What can I do to make them stop being colored yellow and (possibly) auto filling? Thanks in advance!
for the autocompletion, you can use:
<form autocomplete="off">
regarding the coloring-problem:
from your screenshot i can see that webkit generates the following style:
input:-webkit-autofill {
background-color: #FAFFBD !important;
}
1) as #id-styles are even more important than .class styles, the following may work:
#inputId:-webkit-autofill {
background-color: white !important;
}
2) if that won't work, you can try to set the style via javascript programmatically
$("input[type='text']").bind('focus', function() {
$(this).css('background-color', 'white');
});
3) if that won't work, you're doomed :-) consider this:
this wont hide the yellow color, but will make the text readable again.
input:-webkit-autofill {
color: #2a2a2a !important;
}
4) a css/javascript solution:
css:
input:focus {
background-position: 0 0;
}
and the following javascript has to be run 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)
}
}
eg:
<body onload="loadPage();">
good luck :-)
5) If none of the above work try removing the input elements, cloning them, then placing the cloned elements back on the page (works on 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) From 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);
});
});
}
这篇关于覆盖HTML / CSS的浏览器填充和输入突出显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
