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

本文介绍了使用 HTML/CSS 覆盖浏览器表单填充和输入突出显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有两种基本形式:登录和注册，两者都在同一页面上.现在，我对登录表单自动填充没有问题，

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,

此外，表单样式有一个黄色背景，我无法覆盖它，我不想使用内联 CSS 来这样做.我该怎么做才能让它们不再被染成黄色?

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 ?

推荐答案

对于自动补全，可以使用:

for the autocompletion, you can use:

<form autocomplete="off">

关于着色问题:

从您的屏幕截图中我可以看到 webkit 生成以下样式:

from your screenshot i can see that webkit generates the following style:

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

1) 由于#id-styles 比 .class 样式更重要，以下可能工作:

1) as #id-styles are even more important than .class styles, the following may work:

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

2) 如果这不起作用，您可以尝试通过 javascript 以编程方式设置样式

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) 如果那行不通，考虑一下:这不会隐藏黄色，但会使文本再次可读.

3) if that won't work, consider this:this wont hide the yellow color, but will make the text readable again.

input:-webkit-autofill {
        color: #2a2a2a !important;
    }

4) css/javascript 解决方案:

CSS:

input:focus {
    background-position: 0 0;
}

并且必须在加载时运行以下 javascript:

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

例如:

<body onload="loadPage();">

祝你好运:-)

5) 如果上述方法均无效，请尝试删除输入元素，克隆它们，然后将克隆的元素放回页面上(适用于 Safari 6.0.3):

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) 来自这里:

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 覆盖浏览器表单填充和输入突出显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！