Changer la couleur de la bordure du bouton lorsque vous cliquez sur le bouton et après

Question

Que faire pour changer le comportement du bouton de la barre de navigation lorsque vous cliquez sur le bouton et après? Il obtient une couleur de bordure bleue.

<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

Il est peut-être cela, bootstrap a un certain style automatique pour .navbar-toggle. Vous pouvez ajouter quelque chose comme ci-dessous pour contrecarrer son style par défaut.

.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

Je ne suis pas tout à fait sûr comment votre bouton est affiché quand il a un class="navbar-toggle" mais je pense que ce dont vous avez besoin est quelque chose comme:

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

Si vous souhaitez ne pas utiliser jQuery, vous pouvez ne:

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

Answer 3

essayer css: [your-btn] {out-line: none;}