使用HTML / CSS覆盖浏览器表单填写和输入突出显示

一尘不染

使用HTML / CSS覆盖浏览器表单填写和输入突出显示

html

我有2种基本形式-登录和注册，都在同一页面上。现在，我可以自动填写表单登录了， ~~但是注册表单也会自动填写，我不喜欢它。~~

此外，表单样式的背景为黄色，我无法覆盖它，也不想使用内联CSS来实现。我该怎么办才能使它们停止变为黄色 ~~和（可能）自动填充~~ ？提前致谢！

阅读 371

2020-05-10

共1个答案

一尘不染

对于自动完成，可以使用：

<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必须在加载时运行：

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

2020-05-10