web-dev-qa-db-fra.com

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

lorsque vous cliquez quelque part, la bordure disparaît, que vous avez essayé de ne rien faire, mais que vous n’avez pas aidé, comment faire disparaître une bordure de bouton laide en cliquant 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">

cssbutton
68
Cindy Turlington

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>
110
Ankit Agrawal

Contours de focus dans Chrome et FF

enter image description hereenter image description here

enlevé:

enter image description here

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

Démo

P.S:

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

Cela fonctionne pour moi tout simplement :)

*:focus {
    outline: 0 !important;
}
28
X-Coder

La propriété outline 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 pourriez aussi être plus précis si vous vouliez:

button {
    outline-style: none;
}
11
henrywright

Celui-ci a fonctionné pour moi

button:focus {
    border: none;
    outline: none;
}
10
mnis.p

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

button:focus {
    outline: 0 !important;
}

Mais lorsque j'utilise la valeur none, cela ne fonctionne pas pour moi.

1
Gourav

Étant donné le code 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 la focalisation de la bordure du bouton lorsque l'utilisateur cliquera sur le bouton.

1
Mwizak
button:focus{outline:none !important;}

ajoutez !important s'il est utilisé dans Bootstrap

1
user11173874

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

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

.no-outline {
  outline: none;
}

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

1
martinedwards

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

Étant donné que votre préoccupation semble être esthétique, sachez que vous pouvez modifier la couleur, le style et la largeur du contour afin de mieux l'adapter au style de votre site.

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

Sténographie:

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