Chrome のボタンから迷惑な青い枠線を削除するにはどうすればよいですか?

Chrome のカスタム スタイルのボタンから青い枠線を削除します

<ボタン> の外観をカスタマイズする場合CSS を使用してタグを作成する場合、見た目をすっきりさせるためにデフォルトの境界線を削除するのが一般的です。ただし、Chrome では、クリックするとボタンの周囲に迷惑な青い境界線が表示されることがあります。

問題:

デフォルトのブラウザ スタイルは、次のような一部の CSS プロパティをオーバーライドする可能性があります。フォーカスとアクティブ状態に関連します。 Chrome では、border: none が設定されている場合でも、ボタンをクリックすると青いフォーカスの輪郭が表示されます。

解決策:

注: フォーカスの削除アクセシビリティに影響を与える可能性があるため、アウトラインは推奨されません。

それでも青い枠線を非表示にしたい場合は、次の CSS を追加してください。ルール:

button:focus {
  outline: 0;
}

このルールは、デフォルトのブラウザ動作をオーバーライドして、フォーカスのアウトラインを明示的に削除します。

説明:

:focus 擬似このクラスは、要素がフォーカスを受け取ったときに (通常はクリックまたはタブ移動によって) トリガーされます。アウトライン: 0; を設定すると、フォーカスされた状態に関連付けられた青い境界線が削除されます。

代替ソリューション:

• アクセシビリティのために特別に設計されたボタン タグを使用します。 など。
• 次を使用してすべてのボタンのアウトラインを無効にします。 *{アウトライン: 0}; (推奨されません)。
• JavaScript を使用して、特定のボタンのフォーカス アウトラインを削除します。

その他の考慮事項:

• CSS が適切にロードされ、ページに適用されていることを確認してください。
• ブラウザのキャッシュをクリアして、キャッシュされたスタイルを更新します。
• 複数のブラウザでソリューションをテストして、ブラウザ間の互換性を確認します。

参照:

• [MDN ウェブドキュメント - :focus](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus)

以上がChrome のボタンから迷惑な青い枠線を削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。