美文网首页网页前端后台技巧(CSS+HTML)码农的世界让前端飞
前端开发入门到实战:css实现修改浏览器自动填充表单的默认样式

前端开发入门到实战:css实现修改浏览器自动填充表单的默认样式

作者: 560b7bb7b879 | 来源:发表于2019-08-17 13:09 被阅读3次

    当表单中存在input[password]的时候,采用submit方式提交。就会触发浏览器自动填充表单。比如chrome自动填充后,淡黄色输入框代替了背景样式,看起来有些怪异。 那么如何通过css实现取消浏览器自动填充表单的默认样式呢?

    解决方法一:

    当input文本框是纯色背景的,可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景;如:

    web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
    input:-webkit-autofill {
       -webkit-box-shadow: 0 0 0px 1000px white inset;
       border: 1px solid #CCC!important;
    }
    

    如果你有使用圆角等属性,或者发现输入框的长度高度不太对,可以对其进行调整,除了chrome默认定义的background-color,background-image,color不能用!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;
    }</span>
    

    解决方法二:

    input文本框是使用图片背景的。css代码如下:

    input:-webkit-autofill{/*填充样式效果取消*/
        background: none !important;
        -webkit-text-fill-color: #fff !important;
        transition: background-color 99999s ease-in-out 0s;
        -webkit-transition-delay: 99999s;
    }
    

    使用css3动画将其背景色变化的延迟时间尽可能的延长 。

    自己是一个6年的前端工程师,希望本文对你有帮助!

    这里推荐一下我的前端学习交流扣qun:731771211 ,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2019最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,每天分享技术

    点击:加入

    相关文章

      网友评论

        本文标题:前端开发入门到实战:css实现修改浏览器自动填充表单的默认样式

        本文链接:https://www.haomeiwen.com/subject/jitdrctx.html