栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

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

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/575516.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号