1. 程式人生 > >去掉chrome記住密碼後的預設填充樣式

去掉chrome記住密碼後的預設填充樣式

  • 當chrome記住密碼的時候,input框的背景會預設填充為黃色,如圖所示

這裡寫圖片描述

  • 這是因為chrome做了這些個操作

這裡寫圖片描述

  • 對chrome預設定義的background-color,background-image,color使用important是不能提高其優先順序的,其他屬性可使用。
  • 使用足夠大的純色內陰影來覆蓋input輸入框的黃色背景,處理如下
  input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
      -webkit-box-shadow: 0 0 0px 1000px white inset
; border: 1px solid #CCC!important; }
  • 設定後結果如圖

這裡寫圖片描述

附加:我的專案是基於vue-cli的,在vue-cli專案中的index.html中,設定以上樣式即可