≪ Today I learned. RSS購読
公開日
タグ
CSS
著者
ダーシノ(@bc_rikko)

自動入力されたフィールドか判定する

:autofillを使うことで、自動入力されたフィールドかどうかを判定できる。

<input id="name" type="text">

<style>
:autofill {
  border: 4px solid red;
}
</style>

input要素にidnameなどをつけると過去に入力した内容から選択できたり、自動で入力されたりする。

その際、:autofill擬似クラスを使うことで自動で入力されたフィールドを強調し、ユーザーに知らせることができる。

似たようなものに1年以上前からUseragent Stylesheetでinput:-internal-autofill-selectedのスタイルが追加されているので、打ち消したいときに:autofillを使うのもあり。

デモ

参考