完全透明的Bootstrap按钮但仍然可点击。

Question

我希望制作一个按钮，只有可见的文本是由Font Awesome创建的：

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。水平调整大小。单击右侧带有条形图标的按钮即可查看我需要消失的蓝色边框。

- Nikolas Charalambidis

---

如果你能提供一个fiddle的话，这将会更容易。 - D. Walsh

更改为以下大纲：none !important; - BARNI

@BARNI 我想避免使用 !important 语句，即使它会覆盖外部文件。 - Nikolas Charalambidis

Answer 1

由于您要覆盖Bootstrap类，因此您很可能需要更具体的规则。请参见特异性。

CSS示例：

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

Working Example:

.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>

- vanburen