Comment supprimer la bordure de contour du bouton d'entrée

quand cliquez ailleurs, la bordure disparaît, essayé onfocus aucun, mais n'a pas aidé, comment faire disparaître la bordure de bouton laide lorsque vous cliquez sur?

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

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

en utilisant contour: aucun; nous pouvons supprimer cette bordure en chrome

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

Contours de mise au point dans Chrome et FF

supprimé:

input[type="button"]{
   outline:none;
}
input[type="button"]::-moz-focus-inner {
   border: 0;
}

Démo

Accessibilité (A11Y)

/* Don't forget! User accessibility is important */
input[type="button"]:focus {
  /* your custom focused styles here */
}

Cela fonctionne pour moi simplement :)

*:focus {
    outline: 0 !important;
}

Celui-ci a fonctionné pour moi

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

La outlinepropriété est ce dont vous avez besoin. C'est un raccourci pour définir chacune des propriétés suivantes dans une seule déclaration:

• outline-style
• outline-width
• outline-color

Vous pouvez utiliser outline: none;, ce qui est suggéré dans la réponse acceptée. Vous pouvez également être plus précis si vous le souhaitez:

button {
    outline-style: none;
}

button:focus{outline:none !important;}

ajouter !importants'il est utilisé dans Bootstrap

Définissez à la fois les propriétés outlineet les box-shadowpropriétés du bouton sur noneet rendez-les importantes .

input[type="button"] {
    outline: none !important;
    box-shadow: none !important;
} 

La raison pour laquelle les valeurs sont définies sur important est que, si vous utilisez d'autres bibliothèques CSS ou frameworks comme Bootstrap, cela peut être remplacé.

Pour éviter le problème causé lorsque vous modifiez la propriété de contour sur un focus, il faut donner un effet visuel lorsque l'utilisateur Tab sur le bouton d'entrée ou clique dessus.

Dans ce cas, il s'agit d'un type d'envoi, mais vous pouvez également postuler à un type = "bouton".

input[type="submit"]:focus {
    outline: none !important;
    background-color: rgb(208, 192, 74);
}

C'est très simple que vous ne le pensez. Lorsque le bouton est focalisé, appliquez la outlinepropriété, comme ceci:

button:focus {
    outline: 0 !important;
}

Mais quand j'utilise la nonevaleur, cela ne fonctionne pas pour moi.

La suppression de l'événement accessible par nessorry n'est pas une bonne idée dans les développements Web standard. de toute façon, si vous recherchez une solution, la suppression du contour ne résout pas le problème. vous devez également supprimer l'ombre de couleur bleue. pour des scénarios spécifiques, utilisez un nom de classe distinct pour isoler le style spécial de votre bouton.

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

Mieux vaut faire ça

.remove-border.focus, .remove-border:focus {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
 }

Supprimer le contour est un cauchemar d'accessibilité. Les personnes qui utilisent des claviers ne sauront jamais sur quel élément elles se trouvent.

Il est préférable de le laisser, car la plupart des boutons cliqués vous mèneront quelque part de toute façon, ou si vous DEVEZ supprimer le contour, isolez-le d'un nom de classe spécifique.

.no-outline {
  outline: none;
}

Ensuite, vous pouvez appliquer cette classe chaque fois que vous en avez besoin.

Compte tenu du html ci-dessous:

<button class="btn-without-border"> Submit </button>

Dans le style css, procédez comme suit:

.btn-without-border:focus {
    border: none;
    outline: none;
}

Ce code supprimera la bordure du bouton et désactivera le focus de la bordure du bouton lorsque l'utilisateur clique sur le bouton.

Comme beaucoup d'autres l'ont mentionné, selector:focus {outline: none;}supprimera cette bordure, mais cette bordure est une fonctionnalité d'accessibilité clé qui permet aux utilisateurs de clavier de trouver le bouton et ne doit pas être supprimée.

Étant donné que votre préoccupation semble être d'ordre esthétique, vous devez savoir que vous pouvez modifier la couleur, le style et la largeur du contour, pour mieux l'intégrer au style de votre site.

selector:focus {
  outline-width: 1px;
  outline-style: dashed;
  outline-color: red;
}

Sténographie:

selector:focus {
  outline: 1px dashed red;
}