Unwanted blue selection highlight appearing when button is clicked (Safari Only)

Question

I was really unsure what to title this question so I think the best way to explain is with a snippet:

 $(document).ready(function () { $(".navbar-toggle").on("click", function () { $(".navbar").toggleClass("open"); $(".navbar-toggle").toggleClass("open"); }); }); 

 html { font-family: "Raleway", "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-weight: normal; color: #888; } html, body, h1, h2, h3, h4, h5, h6, ul, p { margin: 0; padding: 0; font-weight: normal; } a { text-decoration: none; color: inherit; } button { border: none; -webkit-appearance: button; cursor: pointer; } .navbar { background: rgba(255, 236, 176, 0.97); color: #555; line-height: 50px; display: none; position: relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); z-index: 99; } .navbar-fixed { position: fixed; top: 0; } .navbar-brand { display: inline-block; padding: 0 15px; } .navbar-mobile { background: #ffecb0; position: fixed !important; top: -100%; display: block; height: 275px; width: 100%; overflow-y: auto; opacity: 0.0; transition: .3s ease } .navbar.open { opacity: 1.0; top: 0; } .navbar-mobile .container { padding: 0; } .navbar-toggle { background: #ffecb0; position: fixed; display: block; top: 10px; left: 15px; padding: 9px 10px; border-radius: 5px; z-index: 100; background-image: none; outline: none; } .navbar-toggle .icon-bar { background-color: #555; display: block; width: 22px; height: 2px; border-radius: 1px; transition: .3s ease; } .navbar-toggle .icon-bar+.icon-bar { margin-top: 4px; } .navbar-toggle.open .icon-bar:first-child { transform: translate(0, 6px) rotate(225deg); } .navbar-toggle.open .icon-bar:nth-child(2) { opacity: 0; } .navbar-toggle.open .icon-bar:last-child { transform: translate(0, -6px) rotate(135deg); } nav ul { list-style: none; text-align: center; } nav a { position: relative; display: block; font-size: 16px; font-weight: 500; } nav li a:hover { color: black; background-color: #ffe389; } nav li a.active { color: white; background-color: #847d64; } .btn { } .navbar-button { color: #fff; display: inline-block; border-radius: 5px; font-size: 16px; font-weight: 500; letter-spacing: 1px; text-align: center; overflow: hidden; transition: .3s; background-color: #a48eff; border-color: #8c6aff; line-height: 1; padding: 10px 10px; margin: 0 15px; } .navbar-button:hover { background-color: #b9a8ff; color: white; border-color: #ad94ff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="navbar-toggle" type="button" role="button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <nav class="navbar navbar-mobile"> <div class="container"> <a href="test.html" class="navbar-brand"></a> <div class="navbar-items"> <ul> <li><a href="test.html" class="active">Home</a></li> <li><a href="test2.html">Link 2</a></li> <li><a href="test3.html">Link 3</a></li> <li><a class="button navbar-button" href="contact.html">Call to Action</a></li> </ul> </div> </div> </nav> 

As you can see I have a mobile navbar collapse/expand button which is working fine. But for some reason, only in Mac OS Safari, when the button is clicked something is getting selected and the blue highlight is appearing.

I have no idea what is causing this and I've tried a few different ideas to fix it. As you can see I tried adding onfocus="blur()" to the button but that didn't work. I also tried adding user-select: none; to the button and also the span tags inside but that didn't work either.

It's not a massive issue because usually this button will only be visible when the user is looking at my website on their phone and the problem doesn't occur there. But it is really irritating me and I'd like to fix it so any help is greatly appreciated :)

Thanks in advance.

---

UPDATE

Thank you for all your answers. The solution you have all given is to add .navbar-toggle {outline: 0;} or outline: none; or some variation of this. But this isn't working for me. In fact, all your snippets still have the same problem when I view them. Any idea why I'm not seeing the same result as you guys?

Just to be clear about the behaviour I am seeing, here is a screenshot of Dev_NIX's snippet running after I have just opened and closed the nav menu by clicking the button:

---

ANOTHER UPDATE

I've tried running this code snippet from another version of Safari on another Mac and there is no issue! So I guess it must just be some strange bug with my version of Safari (9.1). So the problem hasn't been solved but it seems to be unique to me so I'm not gonna worry about it any longer :)

Thanks again for all your answers!

Answer 1

Try setting the outline to none:

button.navbar-toggle{ outline:none; }

 $(document).ready(function() { $(".navbar-toggle").on("click focus", function() { $(".navbar").toggleClass("open"); $(".navbar-toggle").toggleClass("open"); }); }); 

 html { font-family: "Raleway", "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-weight: normal; color: #888; } html, body, h1, h2, h3, h4, h5, h6, ul, p { margin: 0; padding: 0; font-weight: normal; } a { text-decoration: none; color: inherit; } button { border: none; -webkit-appearance: button; cursor: pointer; } .navbar { background: rgba(255, 236, 176, 0.97); color: #555; line-height: 50px; display: none; position: relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); z-index: 99; } .navbar-fixed { position: fixed; top: 0; } .navbar-brand { display: inline-block; padding: 0 15px; } .navbar-mobile { background: #ffecb0; position: fixed !important; top: -100%; display: block; height: 275px; width: 100%; overflow-y: auto; opacity: 0.0; transition: .3s ease } .navbar.open { opacity: 1.0; top: 0; } .navbar-mobile .container { padding: 0; } .navbar-toggle { background: #ffecb0; position: fixed; display: block; top: 10px; right: 15px; padding: 9px 10px; border-radius: 5px; z-index: 100; background-image: none; outline: none; } .navbar-toggle .icon-bar { background-color: #555; display: block; width: 22px; height: 2px; border-radius: 1px; transition: .3s ease; } .navbar-toggle .icon-bar+.icon-bar { margin-top: 4px; } .navbar-toggle.open .icon-bar:first-child { transform: translate(0, 6px) rotate(225deg); } .navbar-toggle.open .icon-bar:nth-child(2) { opacity: 0; } .navbar-toggle.open .icon-bar:last-child { transform: translate(0, -6px) rotate(135deg); } nav ul { list-style: none; text-align: center; } nav a { position: relative; display: block; font-size: 16px; font-weight: 500; } nav li a:hover { color: black; background-color: #ffe389; } nav li a.active { color: white; background-color: #847d64; } .btn {} .navbar-button { color: #fff; display: inline-block; border-radius: 5px; font-size: 16px; font-weight: 500; letter-spacing: 1px; text-align: center; overflow: hidden; transition: .3s; background-color: #a48eff; border-color: #8c6aff; line-height: 1; padding: 10px 10px; margin: 0 15px; } .navbar-button:hover { background-color: #b9a8ff; color: white; border-color: #ad94ff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="navbar-toggle" type="button" role="button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <nav class="navbar navbar-mobile"> <div class="container"> <a href="test.html" class="navbar-brand">Logo</a> <div class="navbar-items"> <ul> <li><a href="test.html" class="active">Home</a> </li> <li><a href="test2.html">Link 2</a> </li> <li><a href="test3.html">Link 3</a> </li> <li><a class="button navbar-button" href="contact.html">Call to Action</a> </li> </ul> </div> </div> </nav> 

Answer 2

You can find this line in different browsers with different colors depending of your OS too, it is an outline .

As described by W3Schools:

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

The outline shorthand property sets all the outline properties in one declaration.

The properties that can be set, are (in order): outline-color, outline-style, outline-width.

If one of the values above are missing, eg "outline:solid #ff0000;", the default value for the missing property will be inserted, if any.

I would select the item's class and set the outline to zero.

.navbar-toggle {
    outline: 0;
}

And a working demo:

 $(document).ready(function () { $(".navbar-toggle").on("click", function () { $(".navbar").toggleClass("open"); $(".navbar-toggle").toggleClass("open"); }); }); 

 html { font-family: "Raleway", "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-weight: normal; color: #888; } html, body, h1, h2, h3, h4, h5, h6, ul, p { margin: 0; padding: 0; font-weight: normal; } a { text-decoration: none; color: inherit; } button { border: none; -webkit-appearance: button; cursor: pointer; } .navbar { background: rgba(255, 236, 176, 0.97); color: #555; line-height: 50px; display: none; position: relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); z-index: 99; } .navbar-fixed { position: fixed; top: 0; } .navbar-brand { display: inline-block; padding: 0 15px; } .navbar-mobile { background: #ffecb0; position: fixed !important; top: -100%; display: block; height: 275px; width: 100%; overflow-y: auto; opacity: 0.0; transition: .3s ease } .navbar.open { opacity: 1.0; top: 0; } .navbar-mobile .container { padding: 0; } .navbar-toggle { background: #ffecb0; position: fixed; display: block; top: 10px; left: 15px; padding: 9px 10px; border-radius: 5px; z-index: 100; background-image: none; outline: 0; /* <<== line added */ } .navbar-toggle .icon-bar { background-color: #555; display: block; width: 22px; height: 2px; border-radius: 1px; transition: .3s ease; } .navbar-toggle .icon-bar+.icon-bar { margin-top: 4px; } .navbar-toggle.open .icon-bar:first-child { transform: translate(0, 6px) rotate(225deg); } .navbar-toggle.open .icon-bar:nth-child(2) { opacity: 0; } .navbar-toggle.open .icon-bar:last-child { transform: translate(0, -6px) rotate(135deg); } nav ul { list-style: none; text-align: center; } nav a { position: relative; display: block; font-size: 16px; font-weight: 500; } nav li a:hover { color: black; background-color: #ffe389; } nav li a.active { color: white; background-color: #847d64; } .btn { } .navbar-button { color: #fff; display: inline-block; border-radius: 5px; font-size: 16px; font-weight: 500; letter-spacing: 1px; text-align: center; overflow: hidden; transition: .3s; background-color: #a48eff; border-color: #8c6aff; line-height: 1; padding: 10px 10px; margin: 0 15px; } .navbar-button:hover { background-color: #b9a8ff; color: white; border-color: #ad94ff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="navbar-toggle" type="button" role="button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <nav class="navbar navbar-mobile"> <div class="container"> <a href="test.html" class="navbar-brand">Logo</a> <div class="navbar-items"> <ul> <li><a href="test.html" class="active">Home</a></li> <li><a href="test2.html">Link 2</a></li> <li><a href="test3.html">Link 3</a></li> <li><a class="button navbar-button" href="contact.html">Call to Action</a></li> </ul> </div> </div> </nav> 

EDIT : As mentioned here and here , outline: none; and outline: 0; can give to you similar visual results, but I would go to outline: 0; definetly.

UPDATE: Your screenshot does not look at all like an outline. May you should restart your browser or even your computer/device? It really seems like an inspector bug to me...

Answer 3

This should do the trick. The focus pseudoclass is the key.

.navbar-toggle:focus {
   outline: none;
}

Answer 4

Try below css.

* {
  outline: none;
}