web-dev-qa-db-ja.com

入力フィールドで自動入力サファリアイコンを非表示にする方法

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

htmlcsssafari
32
Kris Jones

完全に非表示にする場合は、次のCSSトリックを使用できます。基本的には、「contacts-auto-fill-button」を検出し、入力フィールドから離します。フィールドの余分なパディングを避けるために、「absolute：position」があることを確認してください。

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

自動入力ボタンのすべてのプロパティをキャンセルする必要はありません。

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

アイコンはシャドウコンテンツなので、DOMは表示しませんが、シャドウDOMは表示します。インスペクターで「<>」ボタンをオンにするだけです。

そこには、次のようなcssでターゲットにできるラッピングコンテナーがあります。

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

内部には、パスワードキーチェーンとcaps-lockインジケーターがあります。

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

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

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

input::-ms-clear {
}

input::-ms-reveal {
}
17
Gwerty

inputパスワードフィールドの自動入力Safariアイコンを非表示にします。

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

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

だから私はwebkitソースを複製し、それを見つけることができました:)

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

4
Stephen Chai

注-フィールドラベルとplaceholder属性値も確認してください。CSSスタイリングルールが逆に適用されているにもかかわらず、これらもオートコンプリートポップアップを表示する可能性があるためです。

詳細については以下を参照してください...

Safari（少なくともバージョン11以降、おそらくそれ以前のバージョン、およびChrome、Firefoxなどのその他の最近のブラウザー）では、オートコンプリートポップアップを非表示にするためのさまざまなCSS回避策が存在する場合でも、このフィールドはブラウザからはユーザー名またはパスワードのフィールドのように見えますが、オートコンプリートフィールドは引き続き表示されます。

ブラウザは<input>タグのname属性でusername、loginおよび類似のバリアントなどのキーワードをチェックしているだけでなく、フィールドのplaceholder属性テキスト、および最も驚くべきことに、フォームフィールドラベルとして使用されるような<input>フィールドに隣接するテキスト。この効果を得るためにラベルテキストを<label>タグに配置する必要はありません-フィールドに近接するだけです。ただし、「近接」と見なされるものを広範囲にテストして決定する機会はありません。 '-これには、さらなる調査と実験が必要であり、可能であれば、WebKitなどのさまざまなWebブラウザレンダリングエンジンのソースコードのレビューが必要です。

そのため、username、user name、loginまたは類似のバリアント、およびpasswordのバリアントなどのキーワードWordがある場合、ブラウザはオートコンプリートポップアップを表示しますそれを非表示にするCSSルールにもかかわらず、フィールドがフォーカスされています！

ポップアップが<input>タグのnameまたはplaceholder属性値によってアクティブ化されるのを見て驚いたことはありませんでしたが、ブラウザによってラベルテキストも考慮されることに驚かされました。そのため、ポップアップが表示されないように、フィールドの文言とラベルを変更する必要がありました。たとえば、プレースホルダーテキストを'Please enter your username...'から'Please enter your user-name...'に変更すると、ブラウザーがフィールドをユーザー名フィールドとして認識できなくなります。また、userとnameの間にハイフンがあります。 –単語間のハイフンなし–ポップアップはまだ表示されているため、ブラウザがチェックしているEdgeケースを示しています。注として、この段階でフィールドのname属性と隣接するラベルを変更して、トリガーとなるキーワードまたはそのバリアントへの参照を削除しました。

ブラウザがユーザー名/パスワードのポップアップを表示するかどうかを判断するためにいくつかの興味深いページ検査を行っていることは明らかです-これは、ユーザーがより安全な資格情報の生成と保存のためにパスワードマネージャーを利用するのを促す素晴らしい全体的な動作ですが、オートコンプリートポップアップを表示したくない場合。たとえば、管理者がスタッフユーザーアカウントを管理できるようにする管理インターフェイス内などのユースケースがあります-ユーザー名でスタッフユーザーを検索するフィールドを提供する場合。このような場合は、オートコンプリートポップアップで自分のユーザー名でフィールドに入力しようとするのではなく、たとえば、任意の数のスタッフユーザー名を入力できるようにします。標準のautocomplete='off'フラグまたは将来のバリアントのいずれかをブラウザーベンダーが採用して、オートコンプリート動作のこのクリーンな制御または適用された場合に常に意図した効果が得られる標準CSS属性を提供できると便利です。残念ながら、これは現在のところそうではありません。

ただし、現時点では、この問題に対処する場合は、ユーザー名またはパスワード<input>フィールドに追加したplaceholder属性の内容と、ラベルのようなものも考慮してください。近くに表示されるテキスト。これらのラベル/属性の値を調整して実験することにより、ブラウザーがこれらのオートコンプリートポップアップを有効にするために使用しているページ検査ロジックを回避できるはずです。

いつものように、ブラウザのレンダリングエンジンの一部はクローズドソースであるため、すべてのプラットフォーム上のすべてのブラウザにこの機能の制御を提供する標準が開発されるまで、これは科学よりも芸術の分野であり続けるでしょう。また、ページ検査ロジックが変更されたためにポップアップが再表示されないことを確認するために、ブラウザの新しいバージョンと照合するためにコードをときどき再確認する必要がある場合があります。

1
bluebinary

https://i.stack.imgur.com/qgYIE.png

<input>タグでラップせずに<form>フィールドを使用すると、Safari 11以降または最新の自動入力候補が表示されます。だからここにあなたができることがあります。

オプション1：<input>要素が<form>要素で囲まれていることを確認してください。 name属性の値を「username」または「login」に設定しないでください。

オプション2：name属性を追加し、その値を「検索」として設定します。 <input type="text" name="search">

注：autocomplete="off"とautocomplete="false"のいずれかで<form>または<input>を使用しても効果はありません。次のCSSプロパティを追加しても機能しません。

input::-webkit-autofill,
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button
0
Muhammad Tahir