Comment puis-je supprimer la bordure bleue ennuyeuse des boutons personnalisés de Chrome ?

Se débarrasser de la bordure bleue ennuyeuse sur les boutons personnalisés de Chrome

Lors de la création de boutons de style personnalisé à l'aide de CSS, il peut être frustrant de rencontrer une bordure bleue inattendue lorsque vous cliquez dessus dans Chrome. Ce contour, qui est présent malgré la définition de la bordure sur "aucun", peut nuire à l'expérience utilisateur.

Une approche courante pour supprimer cette bordure consiste à utiliser "button:active { outline: none }" ou "button: focus { contour: aucun }." Cependant, ceux-ci ne fonctionnent pas toujours efficacement.

Une solution recommandée

Bien qu'il ne soit pas conseillé d'éliminer les bordures du navigateur car cela compromet l'accessibilité, voici une solution qui devrait résoudre le problème. problème :

button:focus {
  outline: 0;
}

En définissant le contour sur "0" lors du focus, Chrome n'affichera plus la bordure bleue, laissant vos boutons personnalisés tels quels prévu.

Démonstration

Découvrez cet extrait de code CSS mis à jour et la démonstration en direct sur http://jsfiddle.net/u4pXu/ pour voir le problème résolu :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!