入力フィールドのオートフィルサファリアイコンを非表示にする方法

Question

私の入力フィールドにはそれぞれ、サファリに矢印のある小さな人物アイコンがあります。それを無効にする方法は？ところで、私は他の同様のページを持っており、それは起こっていません。私はWebインスペクタですべてのスタイルをオフにしてみましたが、1ページにはまだアイコンがあります。だから私はcssかhtmlかどうかわからない。

Answer 1

完全に非表示にしたい場合は、以下のCSSトリックを使用できます。基本的には '連絡先 - 自動入力 - ボタン'を検出し、入力欄から移動します。あなたのフィールドから余分なパディングを避けるために、あなたは絶対位置を持っていることを確認してください。

input::-webkit-contacts-auto-fill-button { 
    visibility: hidden; 
    display: none !important; 
    pointer-events: none; 
    position: absolute; 
    right: 0; 
} 

Answer 2

関連：私はinput[type="password"]のキーアイコンの位置を調整したいが、どこにでも擬似要素セレクタを見つけることができませんでした。

だから私はWebKitのソースをクローン化し、それを見つけることができました:)

input::-webkit-credentials-auto-fill-button

Answer 3

隠すオートフィルSafariのアイコンを入力パスワードフィールドに

::-webkit-credentials-auto-fill-button { 
    visibility: hidden; 
    pointer-events: none; 
    position: absolute; 
    right: 0; 
} 

Answer 4

をあなたはすべてキャンセルする必要はありませんオートフィルボタンのプロパティ

Safariのアイコンをすべて非表示にするには、ラッパーを非表示にすることもできます。

アイコンはシャドウコンテンツであるため、DOMには表示されませんが、シャドウDOMは表示します。インスペクタの '<>'ボタンをオンにするだけです。パスワードキーチェーンとキャップロックインジケーターでしょう内部

input::-webkit-textfield-decoration-container { 
    display: none; /* or whatever styling you want */ 
} 

：あり

あなたはこのようなCSSを標的にすることができる包装容器を見つけることができます

input::-webkit-caps-lock-indicator { 
} 

input::-webkit-credentials-auto-fill-button { 
} 

ああ、あなたがそれをしている間、明確なボタンとパスワードの目のアイコンでIEを忘れないでください：

input::-ms-clear { 
} 

input::-ms-reveal { 
}