Question Supprimer la bordure bleue du bouton personnalisé de style CSS dans Chrome


Je travaille sur une page web, et je veux un style personnalisé <button> Mots clés. Donc, avec CSS, j'ai dit: border: none. Maintenant, ça fonctionne parfaitement en safari, mais en chrome, quand je clique sur l'un des boutons, il y a une bordure bleue agaçante. j'ai pensé button:active { outline: none } ou button:focus { outline:none } fonctionnerait, mais ni faire. Des idées?

Voici à quoi il ressemble avant d'être cliqué (et comment je veux qu'il continue à être cliqué):

Et c'est la frontière dont je parle:

enter image description here

Voici mon CSS:

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.change:hover {
cursor: pointer;
background-color: #F89900;
}

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

512
2017-12-02 23:45


origine


Réponses:


Ajoutez simplement ceci à votre css:

button:focus {outline:0;}

Découvrez-le ou JSFiddle: http://jsfiddle.net/u4pXu/

Ou dans cet extrait:

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.change:hover {
cursor: pointer;
background-color: #F89900;
}

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

button:focus {outline:0;}
<button class="launch">Launch with these ads</button> 
<button class="change">Change</button>


1041
2018-02-13 15:15



Attendez! Il y a une raison pour ce contour laid!

Avant de supprimer ce contour bleu laid, vous pouvez vouloir prendre accessibilité en considération. Par défaut, ce contour bleu est placé sur les éléments focalisables. Cela permet aux utilisateurs ayant des problèmes d'accessibilité de mettre ce bouton en surbrillance. Certains utilisateurs n'ont pas les capacités motrices nécessaires pour utiliser une souris et doivent utiliser uniquement le clavier (ou un autre périphérique d'entrée) pour interagir avec l'ordinateur. Lorsque vous supprimez le contour bleu, il n'y a plus d'indicateur visuel sur l'élément ciblé. Si vous allez supprimer le contour bleu, vous devrait remplacez-le par un autre type d'indication visuelle que le bouton est focalisé.

Solution possible: assombrir les boutons lors de la mise au point

Pour les exemples ci-dessous, le contour bleu de Chrome a d'abord été supprimé en utilisant button:focus { outline:0 !important; }

Voici vos boutons Bootstrap de base tels qu'ils apparaissent normalement: Bootstrap Buttons in Normal State

Voici les boutons quand ils reçoivent le focus: Bootstrap Buttons in Focused State

Voici les boutons quand ils sont pressés: enter image description here

Comme vous pouvez le voir, les boutons sont un peu plus sombres quand ils reçoivent le focus. Personnellement, je recommanderais d'assombrir encore plus les boutons focalisés pour qu'il y ait une différence très nette entre l'état focalisé et l'état normal du bouton.

Ce n'est pas seulement pour les utilisateurs handicapés

Rendre votre site plus accessible est quelque chose qui est souvent négligé, mais peut aider à créer une expérience plus productive sur votre site Web. Il y a beaucoup d'utilisateurs normaux qui utilisent les commandes du clavier pour naviguer sur les sites Web afin de garder les mains sur le clavier.


215
2017-08-14 00:00



Ne pas oublier le !important déclaration, pour un meilleur résultat

button:focus {outline:0 !important;}

Une règle qui a la propriété! Important sera toujours appliquée, peu importe où cette règle apparaît dans le document CSS.


43
2018-05-28 16:50



Je supprime simplement le contour de tous les tags de la page en sélectionnant tout et en appliquant le contour: aucun à tout :)

*:focus {outline:none}

Comme bagofcole mentionné, vous devrez peut-être ajouter! Important aussi, donc le style ressemblera à ceci:

*:focus {outline:none !important}

43
2018-01-06 14:49



Dans mon cas de ce problème, je devais spécifier box-shadow: none

button:focus {
  text-decoration: none;
  outline:none;
  border: none;
  box-shadow: none;
}

23
2018-06-09 14:50



Ajoutez ceci dans votre fichier CSS.

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

10
2017-07-22 06:35



Utilisez soit ceci:

:active {
    outline:none;
}

ou si cela ne fonctionne pas:

:active {
   outline:none !important;
}

Cela fonctionne pour moi (FF et Chrome, au moins). Au lieu de cibler le :focus état, juste cibler le :active état et qui va supprimer la surbrillance esthétiquement gênante dans votre navigateur quand un utilisateur clique sur un lien. Mais il conservera toujours les états de mise au point lorsqu'un utilisateur ayant un handicap tabule ou déplace des onglets à travers une page. Les deux parties sont heureuses. :)


8
2017-11-11 21:45