web-dev-qa-db-fra.com

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

Je travaille sur une page Web et je veux des balises <button> personnalisées. Donc, avec CSS, j'ai dit: border: none. Maintenant, cela fonctionne parfaitement dans un safari, mais en chrome, lorsque je clique sur l'un des boutons, il crée une bordure bleue agaçante. Je pensais que button:active { outline: none } ou button:focus { outline:none } fonctionnerait, mais ne le fait pas non plus. Des idées? 

Voici à quoi cela ressemble avant d’être cliqué (et comment je veux que l’apparence après avoir cliqué):

Et voici 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;
}
cssgoogle-chrome
604
eshellborn

Ajoutez simplement ceci à votre css:

button:focus {outline:0;}

Check it out 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>

1229
Ronen Cypis

Attendre! Il y a une raison pour cette silhouette laide!

Avant de supprimer ce vilain contour bleu, vous voudrez peut-être prendre en compte accessibilité . Par défaut, ce contour bleu est placé sur des éléments focalisables. Cela permet aux utilisateurs ayant des problèmes d’accessibilité de focaliser ce bouton en l’ajustant par tabulation. Certains utilisateurs n'ont pas les compétences motrices pour utiliser une souris et doivent utiliser uniquement le clavier (ou un autre périphérique d'entrée) pour les interactions informatiques. Lorsque vous supprimez le contour bleu, il n'y a plus d'indicateur visuel sur l'élément ciblé. Si vous souhaitez supprimer le contour bleu, vous devriez le remplacer par un autre type d'indication visuelle indiquant que le bouton est activé.

Solution possible: Assombrir les boutons lorsque la mise au point est effectuée

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

Voici les 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 constater, les boutons sont un peu plus sombres quand ils reçoivent la mise au point. Personnellement, je recommanderais de rendre les boutons focalisés encore plus sombres afin qu’il y ait une différence très notable 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 qui peut aider à créer une expérience plus productive sur votre site Web. De nombreux utilisateurs normaux utilisent les commandes du clavier pour naviguer sur les sites Web afin de garder la main sur le clavier.

245
Nathan

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

*:focus {outline:none}

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

*:focus {outline:none !important}
51
Mike

N'oubliez pas la déclaration !important pour un meilleur résultat

button:focus {outline:0 !important;}

Une règle ayant la propriété! Important sera toujours appliquée quel que soit le lieu où cette règle apparaît dans le document CSS.

46
Scabbia

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

button:focus {
  outline:none;
  box-shadow: none;
}
34
antonkronaj

Ajoutez ceci dans votre fichier CSS.

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

Supprimer outline est terrible pour l'accessibilité! Idéalement, la bague de mise au point n'apparaît que lorsque l'utilisateur a l'intention d'utiliser le clavier.

Utilisez : focus-visible . Il s'agit actuellement d'une proposition du W3C visant à styliser le focus uniquement sur le clavier à l'aide de CSS. Jusqu'à ce que les principaux navigateurs le prennent en charge, vous pouvez utiliser ce robuste { polyfill } _.

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

J'ai aussi écrit un post plus détaillé au cas où vous auriez besoin de plus d'informations. 

9
Aaron Noel De Leon

Utilisez soit ceci:

:active {
    outline:none;
}

ou ceci si cela ne fonctionne pas: 

:active {
   outline:none !important;
}

Cela fonctionne pour moi (FF et Chrome, au moins). Au lieu de cibler l'état :focus, ciblez simplement l'état :active et cela supprimera la mise en évidence esthétique importune dans votre navigateur lorsqu'un utilisateur clique sur un lien. Mais il conservera toujours les états d'activation lorsqu'un utilisateur handicapé utilisera des onglets ou des onglets de décalage sur une page. Les deux parties sont heureuses. :)

8
chuk

Pour ceux qui utilisent Bootstrap et ont ce problème, ils utilisent: actif: focus ainsi que just: active et: focus afin que vous ayez besoin de:

element:active:focus {
    outline: 0;
}

Espérons que cela sauvera un peu de temps à quelqu'un qui me l'a trouvé, me cogne la tête pour me demander pourquoi une chose aussi simple ne fonctionnait pas.

7
Forever Nomad

C'est ce qui a fonctionné pour moi:

button:focus {
    box-shadow:none;
}
4
Rob Myrick

pour ce problème:

 enter image description here

utilisez ceci:

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

résultat:

 enter image description here

3
Behnam Mohammadi

essayez ce code pour tous les éléments qui ont un problème de bordure bleue

*{
outline: none;
}

ou

*{
outline-style: none;
}
3
Santosh Khalse

Écrivez simplement outline:none;. Pas besoin d'utiliser le pseudo élément focus

2
Sandeep Sharma

Si vous souhaitez supprimer le même effet en entrée, vous pouvez ajouter le code suivant ainsi que le bouton.

input:focus {outline:0;}
2
aaayumi

Jusqu'à ce que tous les navigateurs modernes commencent à supporter css-selector : focus-visible,
le moyen le plus simple et probablement le meilleur de enregistrer l'accessibilité consiste à supprimer ce focus délicat uniquement pour les utilisateurs de souris et à le sauvegarder pour les utilisateurs de clavier:

1.Utilisez ce petit polyfill (environ 10 Ko): https://github.com/WICG/focus-visible
2.Ajouter le code suivant quelque part dans votre css: 

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

Prise en charge du navigateur par sélecteur css4: focus visible actuellement très faible:
https://caniuse.com/#search=focus-visible

2
pavelkarev

Ceci est un problème dans la famille Chrome et existe depuis toujours. 

Un bogue a été signalé https://bugs.chromium.org/p/chromium/issues/detail?id=904208

Il peut être affiché ici: https://codepen.io/anon/pen/Jedvwj dès que vous ajoutez une bordure à quelque chose qui ressemble à un bouton (par exemple, role = "button" a été ajouté à une balise) ) Chrome décoiffe et définit l’état du focus lorsque vous cliquez avec votre souris.

Je recommande fortement d'utiliser ce correctif: https://github.com/wicg/focus-visible .

Il suffit de faire ce qui suit

npm install --save focus-visible

Ajoutez le script à votre code HTML:

<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>

ou importez dans votre fichier d’entrée principal si vous utilisez webpack ou quelque chose de similaire:

import 'focus-visible/dist/focus-visible.min';

puis mettez ceci dans votre fichier css:

// hide the focus indicator if element receives focus via mouse, but show on keyboard focus (on tab).
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

// Define a strong focus indicator for keyboard focus.
// If you skip this then the browser's default focus indicator will display instead
// ideally use outline property for those users using windows high contrast mode
.js-focus-visible .focus-visible {
  outline: Magenta auto 5px;
}

Vous pouvez simplement définir:

button:focus {outline:0;}

mais si vous avez un grand nombre d'utilisateurs, vous désavantage ceux qui ne peuvent pas utiliser des souris ou ceux qui veulent simplement utiliser leur clavier pour la vitesse.

1
alexrogins

La plupart des solutions ne fonctionneront pas si vous utilisez Bootstrap 4.1 et éventuellement d'autres versions. Après avoir eu beaucoup de mal à la tête, j'ai découvert qu'il fallait appliquer la classe shadow-none:

<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>
1
ATL_DEV

J'ai fait face au même problème alors j'ai utilisé un simple CSS-

.custom-button {
    outline: none
}
1
apurv thakur

Un autre moyen de résoudre le problème d'accessibilité} qui n'a pas encore été mentionné ici consiste à utiliser un peu de Javascript. Les crédits vont à ce blogpost perspicace de hackernoon: https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

L’approche proposée ici est très simple et efficace: Ajout d’une classe lorsque les utilisateurs commencent à utiliser la touche de tabulation pour naviguer dans la page (et la suppriment éventuellement lorsque vous revenez à la souris. Vous pouvez ensuite utiliser cette classe pour afficher un contour de mise au point ou non.

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);
0
Tobija Fischer

j'ai eu le même problème avec bootstrap, j'ai résolu à la fois le contour et l'ombre de la boîte

.btn:focus, .btn.focus {
outline: none!important;
box-shadow: 0 0 0 0 rgba(0, 123, 255, 0)!importamt; // Or none

}

0
corsaro

Le correctif pour Chrome et les autres navigateurs

button:focus { outline: none !important; box-shadow: none !important; }
0
chronomer