Utknąłem w tym przez długi czas. Szukałem i próbowałem wiele sposobów na usunięcie koloru granicznego na ikonę hamburgera BS4 po kliknięciu na nim (w moim lokalnym, pojawia się jako żółty. W tym fragmencie jest niebieski)

Czy ktoś może to pomóc naprawić? Doceń pomoc!

To jest mój kod:

<nav class="navbar sticky-top navbar-expand-lg" style="background-color: #eeeeee">
  <button class="navbar-toggler ml-auto hidden-sm-up float-xs-right" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
    <span><i class="fa fa-navicon"></i></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarToggler">
    <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link active" routerLink="/about" routerLinkActive="active">
          <span>About</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/projects" routerLinkActive="active">
          <span>Projects</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/contact" routerLinkActive="active">
          <span>Contact</span>
        </a>
      </li>
    </ul>
  </div>
</nav>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
11
Pavan 3 czerwiec 2018, 19:34

4 odpowiedzi

Najlepsza odpowiedź

To działało dla mnie w Bootstrap 4.

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

Uwaga: Zarys jest dla ważnego powodu, dostępność! Zwłaszcza dla ludzi, którzy nie mogą korzystać z myszy lub którzy mają upośledzenie wizualne. Zobacz http://www.outlinenone.com/ i rozważ dodanie innego stylu do przełącznika jest aktywny / skoncentrowany.

22
KayakinKoder 2 kwiecień 2020, 10:33

Aby zmienić lub usunąć kolor granicy po kliknięciu na ikonę Burger na ikonę Bootstrap Navbar. Musisz przejść do pliku bootstrap.min.css i przejdź do klasy button:focus. Zmień tam lub całkowicie usuń outline. Jak więc:

button:focus {

outline: 1px dotted;
outline: 5px auto -webkit-focusring-color;

}
5
billy.farroll 3 czerwiec 2018, 16:40

Właściwie dla bootstrap, nie używają granicy dla nawigacji focus używają zarys

Możesz usunąć go szerokość:

button.navbar-toggler.ml-auto.hidden-sm-up.float-xs-right:focus {
    outline: none!important;
}

Mam nadzieję, że ta pomoc:>

button.navbar-toggler.ml-auto.hidden-sm-up.float-xs-right:focus {
    outline: none!important;
}
<nav class="navbar sticky-top navbar-expand-lg" style="background-color: #eeeeee">
  <button class="navbar-toggler ml-auto hidden-sm-up float-xs-right" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
    <span><i class="fa fa-navicon"></i></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarToggler">
    <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link active" routerLink="/about" routerLinkActive="active">
          <span>About</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/projects" routerLinkActive="active">
          <span>Projects</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/contact" routerLinkActive="active">
          <span>Contact</span>
        </a>
      </li>
    </ul>
  </div>
</nav>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
2
Gerardo BLANCO 3 czerwiec 2018, 16:49
.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    border: none;
    box-shadow: none;
}
0
Vishal Basumatary 6 kwiecień 2020, 11:43