当前位置: 首页 > 面试题库 >

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

宋健柏
2023-03-14
问题内容

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

此外,表单样式的背景为黄色,我无法覆盖它,也不想使用内联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);
        });
    });
}


 类似资料:
  • 我不熟悉在VBA和Internet Explorer之间进行交互,但我在网上阅读了很多东西,无法解决代码中的问题。我只想检索网站上的“用户名”框并在其中添加一个值。所以我将所有输入框检索到超文本标记语言元素的集合中,但该集合是空的: 这将给出一个带有“0”的消息框。如果我在代码末尾之前切换断点并“观察”变量,我可以看到里面有17个项目,其中一个是用户名“输入框”,名称为“tfUserName”。你

  • 问题内容: 单击某个“输入”字段时,我试图显示一个覆盖图。我正在这样做。我怎样才能做到这一点? 这是我的代码 我应该采取什么方法? 问题答案: 我创建了一个样本react组件。我希望这会以某种方式帮助您实现您想要的。

  • 我有一个java类,当我们运行时,会执行一个批处理文件。我有一个变量(布尔值),它将显示true或false,指示批处理文件是否正确执行其命令。现在,true或false输出只显示在控制台中。我希望在键入URL时,它会显示在web浏览器上(例如,) 到目前为止,我有以下代码: 运行批处理文件。JAVA BatchFile.java 这个批处理文件。Java类给了我以下错误: JAVA异常:测试类在

  • 到现在为止,我们使用的canvas元素一直采用固定的500像素的宽度和高度。这个尺寸没有问题,但是如果我们想要将它填满整个浏览器窗口,又该如何做呢?对于普通的HTML元素,可以将width和height属性设置为100%,然后一切就都满足要求了。然而,canvas元素并不支持这种方法,它会忽略百分比,将100%解释为100像素,200%解释为200像素,以此类推。因此,我们需要使用另一种方法。 最

  • 本文向大家介绍HTML 突出显示,包括了HTML 突出显示的使用技巧和注意事项,需要的朋友参考一下 示例 该<mark>元素是HTML5中的新元素,用于“由于其在另一个上下文中的相关性”而标记或突出显示文档中的文本。1 最常见的示例是用户输入搜索查询并显示结果以突出显示所需查询的搜索结果。 输出: 常见的标准格式是黄色背景上的黑色文本,但是可以使用CSS进行更改。

  • 问题内容: 我想通过拦截文档对象(而不是accesskey属性)的keypress事件处理程序,来为Web应用程序中的几个页面添加对键盘快捷键的支持。 问题是,每个浏览器都有自己的组合键,因此不可能拿出一套键盘组合可在所有网络浏览器的工作,但一致的。(例如,它会是愚蠢的,如果在保存快捷为++ ,而一个要删除的是+ 。) 因此,我认为在我的几个页面中完全覆盖浏览器快捷方式会更简单。 撇开所有不利因素