資訊專欄INFORMATION COLUMN
摘要：而我們需要自定義的樣式就是圖中黃色的部分注意到上圖的郵件的表單字段了么自動(dòng)填充之后，它就有了一個(gè)黃色的背景，這在很多情況下會與我們原來的網(wǎng)頁配色格格不入。所以，我們來自定義一下這個(gè)自動(dòng)填充的樣式。
表單自動(dòng)填充是什么原文：https://www.codecasts.com/blo...
本文談?wù)摰谋韱巫詣?dòng)填充是指：瀏覽器在網(wǎng)頁中識別到一個(gè)表單的字段時(shí)，提供一個(gè)允許用戶自動(dòng)填充的功能，如下圖
上圖的 GIF 顯示的過程就是自動(dòng)填充。而我們需要自定義的樣式就是圖中黃色的部分
注意到上圖的郵件的表單字段了么？自動(dòng)填充之后，它就有了一個(gè)黃色的背景，這在很多情況下會與我們原來的網(wǎng)頁配色格格不入。
所以，我們來自定義一下這個(gè)自動(dòng)填充的樣式。
解決方案其實(shí)很簡單，我們可以使用 -webkit-autofill 來設(shè)置自動(dòng)填充的樣式，就像我們常規(guī)使用的 CSS 一樣，可以定義它的 border 和 font-size 等，至于背景色，我們可以使用 -webkit-box-shadow 來指定，字體的顏色使用 -webkit-text-fill-color 設(shè)置，所以，最后的 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;
}
通俗的解決方案可以類似上面這樣，這個(gè)代碼可以直接放到你的 CSS 文件中。效果如下圖，注意我們沒有了黃色的背景：
如果說你還想針對不同的表單類型(input,textarea,select等)進(jìn)行不同的自動(dòng)填充樣式的修改，可以在 -webkit-autofill 加上 input，textarea 前綴，比如針對input 的設(shè)置可以是這樣：
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;
}
同理，可以分別設(shè)置 textarea 和 select 表單。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112176.html
摘要：筆記了解屬于上一代的新迭代語言，設(shè)計(jì)最主要的目的是為了在移動(dòng)設(shè)備上支持多媒體例如標(biāo)簽和及標(biāo)記新特性取消了過時(shí)的顯示效果標(biāo)記和新表單元素引入新語義標(biāo)簽的引入標(biāo)簽圖形設(shè)計(jì)本地?cái)?shù)據(jù)庫本地存儲一些好處跨平臺HTML5筆記 了解HTML5 ?HTML5屬于上一代HTML的新迭代語言，設(shè)計(jì)HTML5最主要的目的是為了在移動(dòng)設(shè)備上支持多媒體?。?！ ? 例如： video 標(biāo)簽和 audio 及 canv...
摘要：在元素之后添加內(nèi)容控制表單控件的禁用狀態(tài)。生成相對定位的元素，相對于其正常位置進(jìn)行定位。由于浮動(dòng)框不在文檔的普通流中，所以文檔的普通流的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。 前端面試之CSS display: none; 與 visibility: hidden; 的區(qū)別 聯(lián)系：它們都能讓元素不可見 區(qū)別： display:none;會讓元素完全從渲染樹中消失，渲染的時(shí)候不占據(jù)任...
閱讀 1237·2021-11-17 09:33
閱讀 3655·2021-09-28 09:42
閱讀 3390·2021-09-13 10:35
閱讀 2563·2021-09-06 15:00
閱讀 2471·2021-08-27 13:12
閱讀 3639·2021-07-26 23:38
閱讀 1926·2019-08-30 15:55
閱讀 567·2019-08-30 15:53
