用HTML / CSS填充和输入高亮

我有两种基本形式 - 登录和注册,都在同一页上。 现在,我在填写表单自动填写方面没有问题,但注册表单自动填写也是如此,我不喜欢它。

另外,表单样式会得到一个黄色的背景,我无法重写,我不想使用内联CSS来这样做。 我能做些什么来使他们停止被染成黄色和(可能)自动填充? 提前致谢!


对于自动完成,您可以使用:

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

用一个“强”的阴影来欺骗它:

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

添加此CSS规则,黄色背景颜色将消失。 :)

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
链接地址: http://www.djcxy.com/p/88027.html

上一篇: filling and input highlighting with HTML/CSS

下一篇: AngularJS code not working on chrome on localhost in a folder