chrome浏览器私下认可样式覆盖input背景,input框草绿背景

by admin on 2019年8月24日

修改input框暗许赫色背景,input框栗褐背景

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    background-color: rgb(0, 0, 0) !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
    -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
}

例行意况下直接写这段代码不写!important,借使项目无法见效,必要加!important。

input:-webkit-autofill, textarea:-webkit-autofill,
select:-webkit-autofill { -webkit-box-shadow : 0 0 0px 1000px white
inset…

必发88 1

标题陈说:input表单增多了背景图片,结果自动填充是,编制程序了贰个淡暗绿矩形方框。

至于输入框在Google浏览器中 银色背景的删除,输入框谷歌(Google)

chrome浏览器私下认可样式覆盖input背景,input框草绿背景。Google有谈得来对input 的填充色

累加下面包车型大巴css 就能够了

input:-webkit-autofill {
 -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

中蓝背景的删减,输入框Google Google有温馨对input 的填充色 加上下边包车型大巴css
就能够了 input:-webkit-autofill { -webkit-b…

修改谷歌(Google)浏览器chrome记住密码后活动填写表单的深紫红背景

必发88 2

chrome浏览器私下认可样式覆盖input背景,input框草绿背景。chrome
表单自动填充后,input文本框的背景会成为黄色的,通过查处成分得以见到那是由于chrome会私下认可给电动填写的input表单加上input:-webkit-autofill私有总体性,然后对其予以以下样式:

缓和方案:英特网查询了无数的消除方法,基本都不管用,这里笔者大约说多少个。

input : -webkit-autofill {

1.去除浅蓝背景

        background-color : #FAFFBD ;

  input:-webkit-autofill {    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}  

        background-image : none ;

  outline:none;
 //去除宗旨边框

        color : #000 ;

2.修改readonly属性:

}

  <input type=”password” readonly onfocus=”this.removeAttribute(‘readonly’);”/>  

在有一点点情形下,那个橄榄棕的背景会影响到我们分界面包车型地铁效应,极其是在我们给input文本框使用图片背景的时候,原本的圆角和边框都被遮盖了:

3.借鉴博客园163的,能够在无需默许填写的input框中安装 autocomplete=“new-password”

现象一:input文本框是纯色背景

觉获得这种学习思路对后面一个学习很有启发性,蒙受题目在英特网查询了无数大概消除不了时,能够去互连网看看类似的效应外人是什么样贯彻的,而不是始终地的采取英特网好听的说教。

能够对input:-webkit-autofill使用丰盛大的纯色内阴影来覆盖input输入框的艳情背景;如:

 

input : -webkit-autofill {

 

        -webkit-box-shadow : 0 0 0px 1000px white inset ;

 

        border : 1px solid #CCC !important ;

 

}

一旦你有利用圆角等属性,也许开掘输输入框的尺寸中度不太对,能够对其实行调解,除了chrome默肯定义的background-color,background-image,color不可能用必发88 ,!important提高其事先级以外,别的的质量均可接纳!important升高其优先级,如:

input : -webkit-autofill {

        -webkit-box-shadow : 0 0 0px 1000px white inset ;

        border : 1px solid #CCC !important ;

        height : 27px !important ;

        line-height : 27px !important ;

        border-radius : 0 4px 4px 0 ;

}

气象二:input文本框是利用图片背景

这么些比较麻烦,这段日子还没找到完美的解决措施,有二种选取:

1、假诺你实际想留下原本的内阴影效果,那就只能就义chrome自动填写表单的效应,使用
js 去贯彻,譬喻:

$ ( function () {

        if ( navigator . userAgent . toLowerCase (). indexOf ( “chrome”
) >= 0 ) {

                $ ( window ). load ( function (){

                        $ ( ‘ul input:not(input[type=submit])’ ). each
( function (){

                                var outHtml = this . outerHTML ;

                                $ ( this ). append ( outHtml );

                        });

                });

        }

});

遍历的靶子只怕要基于你的须要去调节。若是您不想行使js,好吧,在form标签上一贯关门了表单的机关填写作用:autocomplete=”off”。

地点是在互连网找到的有个别方法,笔者是用的图片背景,经超过实际验纵然用js的措施会产生提交表单的时候重新载入参数而望尘不及将value传过去,不能只好是将电动填写的意义关闭了,就算影响了有的客户的体会,不过解决了淡绿背景影响总体UI的难点。

2、有背景图片input表单

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

                });

        });

}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图