<input>autocomplete樣式override技巧

[lienweb]

目錄

• 表單設計原則
• :autofill修改背景色workaround

---

forms - 表單設計

涉略至此，目前了解表單設計的要點有：

• client side validateion
  事實上這個是為了提升使用者體驗而做的，比如說此欄位是否為必填？需要填寫的長度/格式為何？
  幫助使用者在送出表單前做些簡單的檢查，如email格式是否正確，或是密碼長度是否足夠等等，不需要等送出表單後才發現格式錯誤讓使用者重填，這樣會增加使用者的等待時間。
  但要注意的是，如同前面提到的，這只是為了提升使用者體驗而做的，並不是真正的驗證，因此不能有效的預防攻擊，只有在server-side驗證才是真正的驗證
• autocomplete
  根據google如何設計表單的教學中，提到如何增加使用者體驗，減少填寫的欄位數量是個不錯的方法。為了實現這個目標，有些瀏覽器提供自動填入的功能，因此可利用在input tag增加autocomplete屬性，取得使用者之前填寫過的資料並代入欄位，進而減少需填寫的欄位數量

---

修改:autofill workaround

使用autocomplete屬性時，事實上可透過css pseudo class :autofill設定背景色。然而觀察實際上瀏覽器提供的預設樣式(這裡以chrome舉例)，發現皆被設定為!important最高層級，無法輕易override background-color修改背景色


因此需要透過其他手段修改預設樣式，這邊紀錄幾個有效的方法：

1. 使用陰影遮蓋背景

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px var(--main) inset;
    -webkit-text-fill-color: var(--text-primary); //文字顏色
  }

2. 瀏覽器過5000s後才變色

input:-webkit-autofill {
  -webkit-text-fill-color: #fff !important;
  transition: background-color 5000s ease-in-out 0s;
}

---

本篇筆記參考資料

• Learn forms Google: help users avoid re-entering data in forms
• 输入框自动填充样式问题解决
• chrome表單自動填入背景色為黃色，可否修改
• Detecting autofill in Javascript
• chrome autofill override
• stackoverflow: Trouble with styling and autofill