web-dev-qa-db-fra.com

Contour non désiré ou bordure autour du bouton lorsque vous cliquez dessus

J'ai un bouton stylé sur mon site web. Mais lorsque je clique dessus, cela crée une bordure ou un contour indésirable (je ne sais pas lequel). Comment puis-je supprimer cette frontière? Vous trouverez ci-dessous tout le code associé au bouton.

button {
    border: hidden;
    cursor: pointer;
    outline: none;
}
<button>this is my button</button>
htmlcssbuttonborderoutline
19
Web_Designer

Si vous parlez de la ligne pointillée dans Firefox, je pense que ce que vous recherchez est la suivante:

button::-moz-focus-inner { border: 0; }

Ceci est un fil de discussion sur le sujet: Comment supprimer le contour en pointillé de Firefox sur les BOUTONS ainsi que les liens?

11
cesarsalazar

Utilisez l'un de ces styles CSS

a:active, a:focus,input, input:active, input:focus{     outline: 0;     outline-style:none;     outline-width:0; }  
a:active, a:focus,button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner 
{     border: none; }

OR

:focus {outline:none;} ::-moz-focus-inner {border:0;}

Une fois la partie de style CSS terminée, vous devrez peut-être également définir IE-Emulator. Mettez à jour le fichier web.config de vos applications Web et incluez la clé ci-dessous.

  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="X-UA-Compatible" value="IE=7; IE=9; IE=8; IE=5;" />
      </customHeaders>
    </httpProtocol>

  </system.webServer>
20
VIP
outline: none;

Cela a fonctionné pour moi dans Chrome.

3
Reji kumar

C'est un contour. Utilisez outline:none; sur: focus pseudo-class pour le supprimer. A bien fonctionné pour moi.

1
Aakash Choubey

Veuillez ne pas supprimer les contours sur les styles de focus, cela rend votre site moins accessible aux utilisateurs utilisant uniquement le clavier et les utilisateurs malvoyants.

Si vous choisissez d'ajouter quelque chose comme :focus { outline: none; } à vos feuilles de style, ajoutez également vos styles pour les éléments ciblés.

Reading: Ne jamais supprimer les contours CSS

0
Peter