如何更好的去除谷歌瀏覽器中input自動填充背景？

input多是平時網頁中使用最多的標籤之一了，但凡須要輸入的地方都少不了。
畢竟輸入是一件比較麻煩的事情，因此瀏覽器也作出了許多便於輸入的地方，比方說自動填充

通常狀況下，在表單提交的時候瀏覽器會自動記錄提交的內容

這個功能原本是很好的，不過當自動填充後，輸入框背景會自動變成淡紫色（之前是x黃色，僅限谷歌瀏覽器），設計師（但凡是有點審美的前端）看到了確定就不幹了，畢竟仍是挺違和的，那麼何如去除這個默認的背景呢？

背景是如何產生的

按照以往的經驗，若是要修改標籤默認的樣式，首先確定是查看標籤的默認樣式，以下

比較好理解，當自動填充時會激活:-internal-autofill-selected僞類，而後就變成了淡紫色。

若是咱們設置樣式覆蓋

input:-internal-autofill-selected{
    background: red!important;
}

雖然樣式覆蓋了，然而並無什麼用，仍然是默認的淡紫色（要是起做用的話就不會專門去研究這個了），緣由不明...

現有的解決方式

網上廣泛的解決方式主要有兩種：

1. 使用內陰影進行覆蓋

既然背景改變不了，那麼就找個東西覆蓋唄

input{
    box-shadow: 0 0 0px 1000px white inset;
}

大部分狀況使用這種方式便可解決問題

2. 關閉自動填充功能

既然是因爲自動填充致使的問題，關掉就好了呀

<input  autocomplete="off">

有些對信息比較敏感的狀況下（不想自動填充）可使用這個功能

現有解決方式的侷限

首先說第二種方式，雖然這種方式比較簡單，可是卻失去了自動填充功能，這對於用戶體驗是很不友好的（手動輸入是一件費時費力的事情），若是說要自定義這個功能，那可能還須要很多的js腳本（還需考慮鍵盤訪問），並且可能還會有意料以外的bug，因此通常狀況下不建議去除默認功能。

那麼第一種方式呢？若是輸入框是純色的背景，那麼給一個和背景同樣的陰影顏色就行了，若是而咱們設計須要的是一種透明的輸入框，那基本就涼掉了。

好比相似這樣的效果，若是被填充了仍是至關難看的

更好的解決方式

下面給出兩種解決方式

方式一：利用background-clip: content-box

既然背景改變不了，那麼就把它裁掉唄。

背景顏色默認是渲染到padding-box的，咱們能夠設置background-clip: content-box只渲染到content-box，這樣背景就看不到了（固然還需指定一下高度爲0。）~

input{
  height: 0;
  padding: 1.2em .5em;
  background-clip: content-box;
}

能夠看到，自動填充時的背景已經消失了，不過還有一個小問題，填充的文字顏色也是沒法直接修改的（默認爲rgb(0,0,0)），緣由相同，這裏咱們能夠藉助一下::first-line僞類

input::first-line{
  color: #fff
}

應該算比較完美了~

https://codepen.io/xboxyan/pen/VwYKJzR

若是demo裏面沒有自動填充選項，能夠先輸入一些字符，而後submit，手動建立一些填充項，下同

方式二：利用animation-fill-mode:forwards

設置animation-fill-mode:forwards後，動畫會一直停留在最後一幀，這個已經和默認的樣式不是一個維度了，無論設置什麼樣式，都會保留最後一幀狀態，好比

<style>
div{
    animation:resetBg .1s forwards;
}
@keyframes resetBg {
  to {
    background: blue;
  }
}
</style>
<div style="background:red!important">div</div>

能夠看到背景很輕易的就被改爲了藍色。

利用這個特性，上面的問題就很容易了，只需設置一個動畫便可

input{
  animation: resetBg .1s forwards;
}
@keyframes resetBg {
  to {
    color: #fff;
    background: transparent;
  }
}

效果也是立竿見影~

https://codepen.io/xboxyan/pen/ZEYpdva

小結

上面兩種方式均實現了一樣的效果，相比第一種方式，第二種對現有代碼的改動最小，基本無反作用，無需改變原有尺寸，因此更推薦第二種方式，固然第一種方式的思路仍是值得推薦的，可能在其餘場景很更適合。

若是有其餘實現思路，歡迎在下方進行留言討論，謝謝~