ボタンがクリックされた後にボタンの境界線の色が変更される

Question

ボタンがクリックされたときとその後にナビバートグルボタンの動作を変更するにはどうすればよいですか？ 青色の境界線が表示されます。

私はそれが class="navbar-toggle"を持っているときにボタンが表示されているか、非常にわかりませんが、私は何が必要だと思うことのようなものである

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
<div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span>       
     </button> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
    </div> 
</div> 
</nav> 

Answer 1

それはこのかもしれない、ブートストラップは.navbar-toggleのためのいくつかの自動スタイリングを持っています。デフォルトスタイリングに反するために、以下のようなものを追加することができます。

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{ 
    border:none; 
} 


.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus { 
    outline: 0; 
} 

Answer 2

：あなたはjQueryのを使用しないことを望む場合は、次のことができ

$('button.navbar-toggle').on('click', function() { 
    $(this).css('border', '1px solid blue'); 
}); 

操作を行います。

document.querySelector('button.navbar-toggle').addEventListener('click', function (e) { 
    e.target.style.border = '1px solid blue'; 
}); 

Answer 3

トライCSS： [your-btn] {out-line: none;}