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

对于自动完成，可以使用：<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);        });    });}

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

3回答