如何去除討厭的Chrome自動填充黃色背景

摘要： 這個問題是老生常談了, 但是之前一直沒有找到一種很好的處理方式, 這次主要就是說明一下我見過的幾種處理方式. 問題 我需要在如圖的 input 中完成自動填充, 但是又不希望出現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>
   複製程式碼

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