如何覆寫瀏覽器表單自動填入和輸入突出顯示？

覆蓋瀏覽器表單填寫和輸入突出顯示

背景

用戶面臨表單自動填充和輸入突出顯示在兩個表單中的挑戰同一頁面，導致不良行為和視覺效果

解決方案

要覆蓋瀏覽器的預設樣式和自動填充，一個有效的方法是使用-webkit-autofill 偽類。這可讓您控制瀏覽器自動填入表單元素時的外觀。

防止自動填充

防止表單欄位自動填充，您可以在頁面載入時觸發背景陰影，有效地欺騙瀏覽器相信該欄位已經存在已填入。

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

注意：此方法在最新版本的 Chrome 中不再有效。

刪除輸入突出顯示

要去除聚焦於輸入字段時的黃色背景突出顯示，您可以再次使用-webkit-box-shadow 屬性來覆蓋瀏覽器的預設樣式。

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

透過實作這些 CSS 規則，您可以有效地停用瀏覽器自動填入並控製表單輸入的視覺外觀，從而實現一致且理想的使用者體驗。

以上是如何覆寫瀏覽器表單自動填入和輸入突出顯示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！