質問: ![type=passwordの横に現れる鍵のアイコン in Safari](https://teratail.storage.googleapis.com/uploads/contributed_images/3337c26a8a8c5fa1cd1a11c6adc62eec.png) Safariブラウザにて、inputフィールドを利用していると、図のような鍵のアイコンや、人のアイコンが出てしまいます。 デザイン上、このアイコンをcssにて非表示にしたく、色々と調べ試したのですが、うまく消す事が出来ません。 そもそも、擬似要素の指定方法が理解できていないのかも知れません。 良い方法がございましたら、ご教授願います。jsを使う必要があれば、jsを使うことに問題はありません。 ・試したcss ``` ``` ``` //ケース1 :-webkit-credentials-auto-fill-buttonで指定 .input_password:-webkit-credentials-auto-fill-button { background-color: #fff; } //ケース2 :-webkit-auto-fill-buttonで指定 .input_password:-webkit-auto-fill-button { background-color: #fff; } //ケース3 :そもそもautofillなんじゃないか説 .input_password:-webkit-autofill-button { background-color: #fff; } //ケース4 :focusやhover必要なんじゃないか説 .input_password:-webkit-auto-fill-button::focus { background-color: #fff; } //ケース5 :いやいや、disply:noneしなきゃ説 .input_password:-webkit-auto-fill-button{ display:none; } ```
回答: 鍵アイコンはブラウザに保存されているパスワードの自動入力が可能になるボタンですね。 ``` input::-webkit-credentials-auto-fill-button { margin: 0; width: 0; background-color: transparent; } ``` このようにすれば、鍵アイコン部分の色を変えることができます。`transparent` にして色を透明にします。また、横幅を0にしておき、少し `margin` が設定されていたようなので `0` にします。