如何去除討厭的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>
   複製代碼

第一次發文, 請指教蟹蟹٩('ω')و