Comment supprimer la bordure indésirable des boutons de saisie en CSS ?

Élimination de la bordure indésirable des boutons de saisie

Lors de l'interaction avec des sites Web, les utilisateurs rencontrent souvent des boutons de saisie, qui servent d'éléments interactifs pour soumettre des données. ou lancer une action. Cependant, ces boutons peuvent parfois afficher une bordure disgracieuse lorsque vous cliquez dessus ou lorsque vous faites le focus.

En CSS, la propriété outline est responsable de la création de la bordure visible autour du bouton. Par défaut, les éléments d'un document Web reçoivent un contour en pointillé lorsqu'ils sont mis au point. Dans le cas des boutons de saisie, ce contour peut être particulièrement gênant.

Solution : supprimer le contour

Pour éliminer la bordure indésirable, vous pouvez exploiter la puissance du propriété outline en définissant sa valeur sur none. Voici comment :

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

Exemple

L'application de ces styles à votre bouton de saisie HTML supprimera le contour lors du clic ou du focus, vous laissant avec un utilisateur propre et transparent. expérience :

<input type="button" value="Example Button">

Remarque pour les utilisateurs de Chrome

Dans Chrome, suppression de la bordure du contour à l'aide du contour : aucun ; la propriété peut ne pas suffire. Dans de tels cas, une ligne CSS supplémentaire est requise :

-webkit-appearance: none;

Appliquer les deux le contour : aucun ; et -apparence du webkit : aucune ; propriétés à votre CSS pour garantir que la bordure n'apparaît pas dans les navigateurs Chrome.

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!