change button border color when the button is being clicked and after - css

Question

What to do to change navbar-toggle button behaviour when the button is being clicked and after?
It gets some blue border color.
<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

It might be this, bootstrap has some automatic styling for .navbar-toggle. You can add something like below to counteract it's default styling.
.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

.navbar button {
outline: none !important;
}
This did the trick for me.

Answer 3

I am not quite sure how your button is being displayed when it has a class="navbar-toggle" but I think what you need is something like :
$('button.navbar-toggle').on('click', function () {
$(this).css('border', '1px solid blue');
});
If you wish to not use jQuery, you can do :
document.querySelector('button.navbar-toggle').addEventListener('click', function (e) {
e.target.style.border = '1px solid blue';
});

Answer 4

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