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

我有两种基本形式：登录和注册，都在同一页面上。现在，我对登录表单自动填写没问题了，但是注册表单也会自动填写，我不喜欢。

此外，表单样式有一个黄色背景，我无法覆盖它，我不想使用内联 CSS 来这样做。我该怎么做才能让它们不再被染成黄色和（可能）自动填充？

原文由 casraf 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 303

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

 <form autocomplete="off">

关于着色问题：

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

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

由于 #id-styles 比 .class 样式更重要，以下可能有效：

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

如果这不起作用，您可以尝试通过 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();">

祝你好运：-）

如果上述方法都不起作用，请尝试删除输入元素，克隆它们，然后将克隆的元素放回页面（适用于 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);
        });
    });
}

原文由 Phil Rykoff 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

element-plus的el-input如何去除聚焦时候的蓝色边框？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

css如何设置纵向滚动条的高度？

Stack Overflow 翻译