zoukankan      html  css  js  c++  java
  • Chrome浏览器记住密码后input框黄色背景且背景图片不显示的问题

    Chrome浏览器记住密码后再进入登录页后,输入框背景颜色变为黄色,字体颜色变成#000黑色,且添加的背景图片也那不显示了,进入审查元素后,发现浏览器默认给输入框添加了样式,并且无法通过important修改

    input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
        background-color: rgb(250, 255, 189);
        background-image: none;
        color: rgb(0, 0, 0);
    }

     解决方法:

    1.如果没有设置背景图片-通过白色阴影覆盖黄色,并设置字体颜色

    input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;/*白色*/
         -webkit-text-fill-color: #323333;/*字体颜色*/
    }

    或通过延迟自动填充的时间

    input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-transition-delay: 99999s;
            -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
        }

    2.有背景图片

    第一种:通过autocomplete="off"关闭浏览器自带填充表单功能

    第二种:背景图片不写在input里,利用absolute置于input框上

    <div class="inputWrap">
        <span class="userLabel"></span>
        <input placeholder="用户名" type="text" id="username" name="username">
    </div>
    

      

  • 相关阅读:
    环境变量
    Python的简介和入门程序
    Mybatis的分页插件PageHelper的使用
    SQLyog 快捷键总结
    如何查看开发项目框架的版本信息
    Linux find命令示例 30
    转:数据库索引原理------MemCached
    array_merge 和 + 的区别
    [介绍]PHP设计模式:DAO(数据访问对象模式)
    PHP业务逻辑层和数据访问层设计
  • 原文地址:https://www.cnblogs.com/web520/p/7278654.html
Copyright © 2011-2022 走看看