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

Chrome のカスタム ボタンの迷惑な青い枠線を取り除く

CSS を使用してカスタム スタイルのボタンを作成する場合、イライラすることがあります。 Chrome でそれらをクリックすると、予期しない青い境界線が表示されます。このアウトラインは、境界線を「なし」に設定しているにもかかわらず表示され、ユーザー エクスペリエンスを損なう可能性があります。

この境界線を削除する一般的な方法の 1 つは、「button:active {outline: none }」または「button:」を使用することです。フォーカス { アウトライン:なし }。」ただし、これらは常に効果的に機能するとは限りません。

推奨される解決策

アクセシビリティを損なうため、ブラウザの境界線を削除することはお勧めできませんが、次の解決策は、問題:

button:focus {
  outline: 0;
}

フォーカス時にアウトラインを「0」に設定すると、Chrome では青い枠線が表示されなくなります。意図したとおりのカスタム ボタンです。

デモ

問題を確認するには、この更新された CSS スニペットと http://jsfiddle.net/u4pXu/ のライブ デモを確認してください。解決済み:

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;
}

button:active {
  outline: none;
  border: none;
}

button:focus {
  outline: 0;
}

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