web-dev-qa-db-fra.com

Supprimer le bouton Shadow

Je travaille dans Bootstrap 3 et j'essaie de supprimer l'ombre/le contour de mes boutons. Le code que j'ai actuellement le fait partiellement. Le contour apparaît toujours pendant une fraction de seconde lorsque vous cliquez sur le bouton. 

Voici un lien vers mon codepen .

 .btn:active,
 .btn:focus,
 .btn.active {
   background-image: none;
   outline: 0;
   -webkit-box-shadow: none;
   box-shadow: none;
 }
htmlcsstwitter-bootstraptwitter-bootstrap-3
5
Hudson Taylor

vous manquiez ceci:

.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus {
  outline: thin dotted;
  outline-offset: -2px;
}

Donc, vous devez le réinitialiser. (!important utilisé uniquement pour la démonstration - NE L'UTILISEZ PAS dans votre code de développement)

Fragment

.container-fluid {
  text-align: center;
}
body .btn {
  height: 170px;
  width: 170px;
  border-radius: 50% !important;
  outline: 0 !important;
}
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn.focus:active,
.btn:active:focus,
.btn:focus {
  outline: 0 !important;
  outline-offset: 0  !important;
  background-image: none  !important;
  -webkit-box-shadow: none !important;
  box-shadow: none  !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <p>result</p>
  <div class="row">
    <div class="col-sm-4">
      <button class="btn">Rock</button>
    </div>
    <div class="col-sm-4">
      <button class="btn">Paper</button>
    </div>
    <div class="col-sm-4">
      <button class="btn">Scissors</button>
    </div>
  </div>
</div>

5
dippas

Changez votre sélecteur pour cela

.btn:active,
.btn:focus,
.btn.active,
.btn:active:focus {
   background-image: none;
   outline: 0;
   -webkit-box-shadow: none;
   box-shadow: none;
}
2
Seba Maldonado

Pas encore documenté, mais Bootstrap 4.1 supporte l'ajout d'une classe shadow-none pour supprimer une ombre.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<p>Click both buttons below to see the difference:</p>
<button class="btn">Bootstrap button</button>
<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>

2
Philip Bijker

Ajouter ce style aidera

.btn:active:focus {
  outline: 0;
}
1
Geinmachi

Placez cet extrait, il sera corrigé.

    .btn:active,
.btn:focus,
.btn.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
   outline: none !important;
}
0
kernal lora

bootstrap 4  

dans mon cas c'était assez:

.btn:focus{
box-shadow: none !important;
}
0
Patryk K