chrome 浏览器表单自动填充默认样式覆盖

叁歲伎倆 2023-06-07 08:23 8阅读 0赞

### chrome 浏览器表单自动填充默认样式覆盖 ###

*   *  通过box-shadow覆盖底色
     *  使用动画

## 通过box-shadow覆盖底色 ##

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { 
      box-shadow: 0 0 0 1000px white inset;
      -webkit-text-fill-color: #333;
    }
    input[type=text]:focus, input[type=password]:focus, textarea:focus { 
      box-shadow: 0 0 0 1000px white inset;
    }

## 使用动画 ##

1.  动画延迟

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

1.  通过无限循环动画

input:-webkit-autofill { 
      animation: autofill-fix 1s infinite;
      -webkit-text-fill-color: #ccc;
    }
    
    @-webkit-keyframes autofill-fix { 
      from { 
        background-color: transparent
      }
      to { 
        background-color: transparent
      }
    }

3.通过 js 控制

参考链接

1.  [chrome 浏览器表单自动填充默认样式 - autofill][chrome _ - autofill]

[chrome _ - autofill]: https://lhajh.github.io/css/chrome/2018/04/17/The-chrome-browser-form-automatically-fills-in-the-default-style-autofill.html