Safariのautofill buttonのスタイルを変更する方法

1353 ワード
Safari CSS3 password autofill CSS3 テキストリンク

Safariのinput[password]にフォーカスした際に表示される鍵マーク。
このカラーを変更する方法です。
背景が暗い場合は、デフォルトだと視認性が良くないでの変更が必要かと思います。
細い箇所ですが、スタイルに一貫性を持たせるにも変更が必要ですね。

鍵マーク（オートフィルボタン）


この黒い鍵マークです。

ソースコード

サンプルコード

input::-webkit-auto-fill-button {
  background-color: #4A90E2;
  &:hover {
    background-color: #4A90E2;
  }
}