Chrome でカスタム ボタンに青い枠線が表示されるのはなぜですか? アクセシビリティを維持しながらそれを削除するにはどうすればよいですか?

Chrome でカスタム スタイルのボタンから青い枠線を削除する方法

カスタム デザインの Web サイトの場合、開発者は多くの場合 <ボタン> のスタイルを設定することを選択します。カスケード スタイル シート (CSS) を介した要素。ただし、Chrome ユーザーは、クリックしたときにボタンの周囲に青い枠線が表示される問題が発生する可能性があります。

フォーカス状態の再定義

問題のある青い枠線は、ブラウザのデフォルトのフォーカス状態です。これを削除するには、アウトラインなどのフォーカス状態のプロパティを変更します。

button:focus {
  outline: 0;
}

アウトライン プロパティを 0 に設定すると、フォーカス状態の境界線が事実上無効になります。

アクセシビリティ低下警告の削除

outline: 0 を設定してフォーカス状態を削除すると、フォーカスなどの視覚的な手がかりに依存するユーザーのアクセシビリティが妨げられる可能性があることに注意することが重要です。 border.

アクセシビリティを向上させるために、次の CSS が推奨されます:

button:focus {
  outline: none;
}

この変更により、デフォルトのアウトライン スタイルが削除され、アクセシビリティが維持されます。

例

提供された CSS に、button:focus ルールが追加されました:

button.launch {
  background-color: #F9A300;
  border: none;
  height: 40px;
  padding: 5px 15px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 300;
  margin-top: 10px;
  margin-right: 10px;
}

button.launch:hover {
  cursor: pointer;
  background-color: #FABD44;
}

button.change {
  background-color: #F88F00;
  border: none;
  height: 40px;
  padding: 5px 15px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 300;
  margin-top: 10px;
  margin-right: 10px;
}

button.change:hover {
  cursor: pointer;
  background-color: #F89900;
}

/* Remove annoying Chrome blue focus border */
button:focus {
  outline: none;
}

This適切なアクセシビリティを維持しながら、Chrome で青い境界線が確実に削除されます。

以上がChrome でカスタム ボタンに青い枠線が表示されるのはなぜですか? アクセシビリティを維持しながらそれを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。