Comment éliminer les bordures de contour des boutons de saisie dans les navigateurs ?

Style des boutons de saisie pour éliminer les bordures de contour

Certains navigateurs affichent une bordure de contour autour des boutons de saisie, ce qui peut affecter l'esthétique du bouton et l'expérience utilisateur . Ce problème survient lorsque le bouton perd le focus, laissant derrière lui une bordure disgracieuse. Pour supprimer cette bordure, la propriété "outline" peut être utilisée.

Dans l'extrait de code fourni, le CSS du bouton de saisie est défini sans propriété outline. Pour supprimer la bordure, ajoutez la ligne suivante :

outline: none;

Voici le code CSS mis à jour :

input[type=button] {
  width: 120px;
  height: 60px;
  margin-left: 35px;
  display: block;
  background-color: gray;
  color: white;
  border: none;
  outline: none;
}

Ce style modifié éliminera la bordure du contour du bouton de saisie dans Chrome et autres navigateurs prenant en charge la propriété "outline".

En spécifiant "outline: none;", le navigateur est invité à supprimer toute bordure ou lueur autour du bouton, quel que soit le son état de focalisation. Cela garantit une apparence propre et uniforme du bouton tout au long de l'interaction de l'utilisateur.

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!