CSS - 偽類 :autofill

CSS 中的:autofill偽類用於設定<input>元素的外觀樣式，該元素的值由瀏覽器自動填充，表明使用者之前的資料已儲存並載入到表單中。當用戶編輯欄位時，偽類:autofill將停止匹配。

許多瀏覽器的內部樣式表對-webkit-autofill樣式宣告使用!important，網頁無法覆蓋它。

為了獲得最佳瀏覽器支援，應同時使用-webkit-autofill和:autofill。

語法

input:autofill {
   /* ... */
}

:autofill偽類在 Chrome、Edge、Opera 瀏覽器中使用廠商字首：-webkit-實現。

CSS :autofill 示例

以下示例演示了在輸入元素上使用:autofill偽類的用法。當文字欄位由瀏覽器自動完成時，輸入元素的邊框和背景顏色會發生變化。

<html>
<head>
<style>
   label {
      display: block;
      margin-top: 1em;
   }
   input {
      border: 3px solid grey;
      padding: 5px;
   }
   input:-webkit-autofill,
   input:-webkit-autofill:focus,
   select:-webkit-autofill,
   select:-webkit-autofill:focus {
      border-radius: 3px;
      border: 3px solid red;
      -webkit-text-fill-color: blue;
      box-shadow: 0 0 0px 1000px yellow inset;
   }
   input:autofill,
   input:autofill:focus,
   select:autofill,
   select:autofll:focus {
      border-radius: 3px;
      border: 3px solid red;
      -webkit-text-fill-color: blue;
      box-shadow: 0 0 0px 1000px yellow inset;
   }
</style>
</head>
<body>
   <h3>:autofill example</h3>
   <form method="post" action="">
      <label for="name">First Name</label>
      <input type="text" id="name" />
      <label for="name">Last Name</label>
      <input type="text" id="name" />
      <label for="email">Email</label>
      <input type="email" name="email" id="email" autocomplete="email" />
   </form>
</body>
</html>

列印頁面