資訊專欄INFORMATION COLUMN
摘要：而我們需要自定義的樣式就是圖中黃色的部分注意到上圖的郵件的表單字段了么自動填充之后，它就有了一個黃色的背景，這在很多情況下會與我們原來的網頁配色格格不入。所以，我們來自定義一下這個自動填充的樣式。
表單自動填充是什么原文：https://www.codecasts.com/blo...
本文談論的表單自動填充是指：瀏覽器在網頁中識別到一個表單的字段時，提供一個允許用戶自動填充的功能，如下圖
上圖的 GIF 顯示的過程就是自動填充。而我們需要自定義的樣式就是圖中黃色的部分
注意到上圖的郵件的表單字段了么？自動填充之后，它就有了一個黃色的背景，這在很多情況下會與我們原來的網頁配色格格不入。
所以，我們來自定義一下這個自動填充的樣式。
解決方案其實很簡單，我們可以使用 -webkit-autofill 來設置自動填充的樣式，就像我們常規使用的 CSS 一樣，可以定義它的 border 和 font-size 等，至于背景色，我們可以使用 -webkit-box-shadow 來指定，字體的顏色使用 -webkit-text-fill-color 設置，所以，最后的 CSS 代碼大概是這樣：
:-webkit-autofill,
:-webkit-autofill:hover,
:-webkit-autofill:focus {
borrder: none;
-webkit-text-fill-color: #000; // 自定義字體的顏色
-webkit-box-shadow: 0 0 0px 1000px #fff inset;// 背景色
transition: background-color 5000s ease-in-out 0s;
font-weight: 500;
}
通俗的解決方案可以類似上面這樣，這個代碼可以直接放到你的 CSS 文件中。效果如下圖，注意我們沒有了黃色的背景：
如果說你還想針對不同的表單類型(input,textarea,select等)進行不同的自動填充樣式的修改，可以在 -webkit-autofill 加上 input，textarea 前綴，比如針對input 的設置可以是這樣：
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
border: none;
-webkit-text-fill-color: #000;
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
transition: background-color 5000s ease-in-out 0s;
font-weight: 500;
}
同理，可以分別設置 textarea 和 select 表單。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112176.html
摘要：在元素之后添加內容控制表單控件的禁用狀態。生成相對定位的元素，相對于其正常位置進行定位。由于浮動框不在文檔的普通流中，所以文檔的普通流的塊框表現得就像浮動框不存在一樣。 前端面試之CSS display: none; 與 visibility: hidden; 的區別 聯系：它們都能讓元素不可見 區別： display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據任...
閱讀 1203·2021-11-17 09:33
閱讀 3599·2021-09-28 09:42
閱讀 3326·2021-09-13 10:35
閱讀 2478·2021-09-06 15:00
閱讀 2438·2021-08-27 13:12
閱讀 3609·2021-07-26 23:38
閱讀 1826·2019-08-30 15:55
閱讀 539·2019-08-30 15:53
