input自动填充浏览器记住的密码后，去除输入框背景颜色

旧城等待， 2024-04-17 05:59 65阅读 0赞

谷歌chrome浏览器在用户登录记住密码之后通常会改变input框的背景色

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70][]

input   CSS样式

input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
    	-webkit-text-fill-color: #ededed !important;
    	-webkit-box-shadow: 0 0 0px 1000px transparent  inset !important;
        background-color:transparent;
        background-image: none;
         transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
    }
    input {
    	 background-color:transparent;
    }

input  scss样式

input {
          background-color:transparent;
          border: 0px;
          -webkit-appearance: none;
          border-radius: 0px;
          padding: 12px 5px 12px 15px;
          color: $bg;
          height: 47px;
          // caret-color: $cursor;
    
          &:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
            -webkit-text-fill-color: $bg !important;
    	      -webkit-box-shadow: 0 0 0px 1000px transparent  inset !important;
            background-color:transparent;
            background-image: none;
            transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
          }
        }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/dc732c01c7ad402abae40a3e95fcba7e.png