パスワードフィールドに現れる謎の鍵アイコン in Safariを見えなくしたい

Question

Safariブラウザにて、inputフィールドを利用していると、図のような鍵のアイコンや、人のアイコンが出てしまいます。
デザイン上、このアイコンをcssにて非表示にしたく、色々と調べ試したのですが、うまく消す事が出来ません。
そもそも、擬似要素の指定方法が理解できていないのかも知れません。

良い方法がございましたら、ご教授願います。jsを使う必要があれば、jsを使うことに問題はありません。

・試したcss

<input class="input_password" type="password" name="new_password" placeholder="パスワード">

//ケース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;
}

Answer 1

鍵アイコンはブラウザに保存されているパスワードの自動入力が可能になるボタンですね。

input::-webkit-credentials-auto-fill-button {
  margin: 0;
  width: 0;
  background-color: transparent;
}

このようにすれば、鍵アイコン部分の色を変えることができます。transparent にして色を透明にします。また、横幅を0にしておき、少し margin が設定されていたようなので 0 にします。

Comments

[sarada661]

ありがとうございます。試してみます！

Answer 2

回答ではありませんが、

鍵アイコンは、暗号化されている事示すアイコンではありませんか?
これを非表示にする事は、入力が暗号化されていない事を示すことになりますが、問題ありませんか?

Comments

[sarada661]

動作を見る限り、今回の件であげているものは、Takamosoさんの回答にあるような自動入力させるもののようです。

pepperleafさんの仰る場合でも、こちらとしては問題ないです！
> 入力が暗号化されていない事を示すことになりますが、問題ありませんか?