如何去除讨厌的Chrome自动填充黄色背景

这个问题是老生常谈了, 但是之前一直没有找到一种很好的处理方式, 这次主要就是说明一下我见过的几种处理方式.

问题

我需要在如图的 input 中完成自动填充, 但是又不希望出现Chrome的黄色背景

处理方式

1. 搜索之后, 出现频率最高的一条:

   方法一:

   使用 box-shadow 属性对黄色背景进行覆盖

   input {
      box-shadow: 0 0 0px 1000px white inset
   }
   复制代码

   处理之后的问题是什么呢?

   实际上黄色没有消除, 只是用其他颜色覆盖.

   例如上面的代码中是用白色进行覆盖, 做不到半透明的效果.

2. 方法二

   使用双重 input 进行覆盖

   这种方式我也进行过尝试

   <form autocomplete="off">
     <input
       :type="newType"
       :placeholder="placeholder"
       :name="name+'-show'"
       class="input-autocomplete-show"
       autocomplete="off"
       @focus="getFocus"
     ></form>
   <input
     :type="newType"
     :placeholder="placeholder"
     :name="name"
     ref="valueInput"
     class="input-autocomplete-value"
   >
   复制代码

   其本质, 是用一个不自动填充的 input 专门用于显示, 再用一个自动填充的 input 隐藏在其之后, 从而做到显示时没有黄色背景

   这个方法我遇到一些小问题, 在用户点击 显示input 时, 如果做到触发 隐藏input 的自动填充界面调起?

   鄙人尝试过 .focus() .click() 均无效

   因此想要尝试使用模拟用户输入一个字符再删掉从而调起自动填充页.(未尝试)

3. 方法三

   黄色背景本质上是这么一串 CSS 导致的

   input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
       background-color: rgb(250, 255, 189) !important;
       background-image: none !important;
       color: rgb(0, 0, 0) !important;
   }
   复制代码

   那么解决方法就是将背景去除

   使用 background-clip 属性进行处理

   将背景的填充框选择为 content-box (关于更多 background-clip 填充值, 盒子模型, 详见MDN)

   再将 height 修为 0 , 即可把 content-box 高度设置为0, 从而黄色背景消失了

   注: 这里不能同时将 width 修为 0 , 会导致内容消失

   <!-- 附上第一幅图片效果的代码 -->
       <input
         type="username"
         placeholder="用户名"
         id="username"
         name="username"
         class="login-input"
       >
       
       <style>
       .login-input {
           background: transparent content-box;
           box-sizing: border-box;
           width: 90%;
           height: 0;
           padding: 15px 5%;
           outline: none;
           border: none;
           border-bottom: 1px solid #333;
           margin-bottom: 20px;
       }
       </style>
   复制代码

第一次发文, 请指教蟹蟹٩('ω')و