Полностью прозрачная кнопка Bootstrap, но все еще активна

Question

Я хотел бы сделать кнопку с единственным видимым текстом внутри сделаны с Шрифт Высокий:

HTML

<button class="btn navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
    <i class="fa fa-bars"></i> 
</button> 

я вынужден все границы, фон и т.д., как прозрачна:

CSS

.btn { 
    outline: none; 
    border: 0px; 
    box-sizing: none; 
    background-color: transparent; 
} 

Хорошо, хорошо работает, если я не нажму кнопку. Затем отображается голубая рамка Bootstrap по умолчанию. Как сделать все кнопки-подобные функции прозрачными, но сохранить выделение текста при наведении курсора (меняется на синий)? Я попытался добавить файл .btn:active в CSS, но не работает.

Адрес JSFiddle. Измените размер по горизонтали. Нажмите кнопку с полосками справа, чтобы увидеть синюю рамку, в которой мне нужно исчезнуть.

Answer 1

Вы, скорее всего, должны быть более конкретными в своих правилах, поскольку вы переопределяете классы Bootstrap. См Specificity

Пример CSS:

.navbar .navbar-toggle, 
.navbar .navbar-toggle:focus { 
    outline: none; 
    border: 0; 
    box-shadow: none; 
    background-color: transparent; 
} 

Рабочий пример:

.navbar .navbar-header .navbar-toggle, 
 
.navbar .navbar-header .navbar-toggle:focus { 
 
    outline: none; 
 
    border: 0; 
 
    box-shadow: none; 
 
    background-color: transparent; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 

 
<div class="menu"> 
 
    <nav class="navbar navbar-fixed-top"> 
 
    <div class="container"> 
 

 
     <div class="navbar-header"> 
 
     <button class="btn navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <i class="fa fa-bars"></i> 
 
     </button> 
 
     </div> 
 

 
     <div class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="active"><a href="#">A</a> 
 
      </li> 
 
      <li><a href="#">B</a> 
 
      </li> 
 
      <li><a href="#">C</a> 
 
      </li> 
 
      <li><a href="#">D</a> 
 
      </li> 
 
      <li><a href="#">E</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 

 
    </div> 
 
    </nav> 
 
</div> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>