it-roy-ru.com

Удалить тень от кнопки

Я работаю в Bootstrap 3 и пытаюсь удалить тень/контур моих кнопок. Код, который у меня сейчас есть, делает это частично. Контур все еще появляется на долю секунды при нажатии кнопки. 

Вот ссылка на мой codepen .

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

вы упустили это:

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

Так что вам нужно сбросить его. (!important используется только для демонстрации - НЕ ИСПОЛЬЗУЙТЕ в своем коде разработки)

Отрывок

.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

Измените свой селектор для этого

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

В настоящее время (пока) не документировано, но Bootstrap 4.1 поддерживает добавление класса shadow-none для удаления тени.

<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

Добавление этого стиля поможет

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

Поместите этот фрагмент, он будет исправлен.

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

начальная загрузка 4  

в моем случае этого было достаточно:

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