Chrome預設的覆蓋樣式

-webkit-autofill是chrome用來蓋掉我們原本的css

input:-webkit-autofill{
 background-color:rgb(250, 255, 189) !important;
 background-image:none !important;
 color:rgb(0, 0, 0) !important;
}

• 範例
  

• 呈現
  可以看到藍色背景被覆蓋成黃色背景了
  
  

用-webkit-autofill來騙chrome

一.蓋掉背景色使用box-shadow inset(從外陰影改為內陰影)和spread(傳播半徑)

• 內陰影傳播半徑15px
  

• 內陰影傳播半徑100px
  

二.幫chrome加入box-shadow

input:-webkit-autofill{
 -webkit-box-shadow: 0 0 0px 100px red inset; 
}

• 未加入
  
  
• 加入後
  
  

參考文章

https://segmentfault.com/q/1010000000671971

• 用chrome預設屬性修改input框和文字顏色
  https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/
• 用chrome預設屬性修改input背景圖等等
  http://webagility.com/posts/the-ultimate-list-of-hacks-for-chromes-forced-yellow-background-on-autocompleted-inputs