web-dev-qa-db-fra.com

Bouton Bootstrap - Supprimer le contour sous Chrome OS X

Je cherche à atteindre cet objectif: http://getbootstrap.com/javascript/#popovers-examples - faites défiler jusqu'à la "démonstration en direct" et cliquez sur le bouton contextuel rouge, sous Chrome sous OS X .. .. c'est parfait beau

Maintenant, allez ici (l’enfant à problème): http://yoyo.io/javascript/#popovers - le contour est bleu, aaaargh.

Si vous inspectez, vous constaterez que de nombreux efforts CSS sont déployés pour supprimer ce problème! Cela semble correct dans Safari et Firefox, mais pas du tout dans Chrome!

Quelqu'un - qu'est-ce que je regarde ??

Merci d'avance!

google-chromebuttonfocustwitter-bootstrap-3outline
42
user1583909

Je vois que .btn:focus a une outline dessus:

.btn:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

Essayez de changer ceci pour:

.btn:focus {
  outline: none;
}

En gros, recherchez toutes les instances de outline sur des éléments :focused - c'est ce qui le cause.

79
Nick Heer

Pour tous les googleurs comme moi, où ..

.btn:focus {
    outline: none;
}

ne fonctionnait toujours pas dans Google Chrome, les éléments suivants devraient complètement supprimer toute lueur de bouton.

.btn:focus,.btn:active:focus,.btn.active:focus,
.btn.focus,.btn:active.focus,.btn.active.focus {
    outline: none;
}
34
shaneparsons
.btn:focus, .btn:active:focus, .btn.active:focus{
    outline:none;
    box-shadow:none;
}

Cela devrait supprimer le contour et l'ombre de la boîte 

19
sidhartha madipalli

Dans bootstrap 4, le contour n'est plus utilisé, mais l'ombre de la boîte. Si c'est votre cas, procédez comme suit:

.btn:focus {
    box-shadow: none;
}
9
George Henrique

.btn.active ou .btn.focus seul ne peut pas remplacer les styles de Bootstrap. Pour le thème par défaut:

.btn.active.focus, .btn.active:focus,
.btn.focus, .btn:active.focus, 
.btn:active:focus, .btn:focus {
      outline: none;
}
5
Narch Tranch

Avec scss: 

$btn-focus-box-shadow: none!important;
4
Hannes Be

Cela va l'enlever - court et propre:

.btn {
    outline: none !important;
}
1
Entertain

Rechercher et remplacer

outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;

Remplacer pour

outline: 0;
1
Calvin Grain

La solution la plus simple est: Créez un fichier CSS et tapez ceci:

.btn:focus, .btn:active:focus, .btn.active:focus {
    box-shadow: none !important;
}
1
Decode

Ce CSS va de ce fichier "tab-focus.less" dans le dossier mixins (cela pourrait être difficile à trouver, car les mixins ne sont pas affichés dans chrome dev-tools). Donc vous devriez éditer ceci:

// WebKit-style focus 

.tab-focus() {
      // Default
      outline: thin dotted;
      // WebKit
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }
0
Margarita

Si quelqu'un utilise bootstrap sass, notez que le code se trouve sur le fichier _reboot.scss comme suit:

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

Donc, si vous voulez conserver le fichier _reboot, je suppose que vous pouvez remplacer avec des fichiers CSS simples au lieu d'essayer de rechercher une variable à modifier.

0
Diego Ponciano

Si les réponses ci-dessus ne fonctionnent toujours pas, ajoutez ceci:

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

vous pouvez mettre cette balise dans votre code HTML.

<button class='btn btn-primary' onfocus='this.blur'>
     Button Text
</button>

J'ai utilisé la mise au point car onclick affichait toujours l'éclat pendant une microseconde et émettait un flash horrible en termes d'utilisation. Cela semblait se débarrasser après l'échec de toutes les méthodes CSS. 

0
Evan Burbidge

Dans les mixins des fichiers Sass des sources d'amorçage, supprimez toutes les références $border (pas dans la variante hiérarchique).

@mixin button-variant($color, $background, $border){ 
$active-background: darken($background, 10%);
//$active-border: darken($border, 12%);    
  color: $color;
  background-color: $background;
  //border-color: $border;
  @include box-shadow($btn-box-shadow);
  [...]
}

Ou simplement codez vous-même le mixin _customButton.scss.

0
RizzCandy

Voici la solution: 

#sec-one{padding: 15px 0;}
p{text-align: center;}
/*
* Change the color to any color you want;
* or set to none if you don't any outline at all.
*/
*:focus:not(a){
    outline: 2px solid #f90d0e !important;
    box-shadow: none !important;
}
<!doctype html>
<html lang="en">
<head>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<section id="sec-one">
<div class="container">
    <div class="row">
      <div class="col">
        <form>
          <fieldset class="form-group">
            <input type="text" class="form-control" placeholder="Full Name" required>
          </fieldset>
           <fieldset class="form-group">
            <input type="email" class="form-control" placeholder="Email Address" required>
          </fieldset>
          <fieldset class="form-group">
            <input type="submit" class="btn btn-default" value="Sign Up">
          </fieldset>
          </form>
      </div>
    </div>
</div>
</section>
</body>
</html>

Cela fonctionne 100% espérons que cela vous aide.

0
nixx