Annoying blue border and padding


#1

Im trying to follow
https://www.w3schools.com/howto/howto_js_dropdown_sidenav.asp
to create a dropdown menu, heres my result


everything seems good except on the divs with the dropdown caret thing When active, have a little blue border surrounding the element, I cant figure out how to turn that off


#2

I noticed the blue outline is only there if the focus is on the element, if I click the mouse elsewhere it goes away.


#3

I was using bootstrap and had to overwrite with

button:focus { outline:none }

#4

That’s probably the default outline on focussed elements but without your actual code it’s hard to say for certainty.

In the w3schools example they turn it off with outline:none on the anchors.

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
  border: none;
  background: none;
  width:100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

Of course the focus outline is there to enable keyboard users to navigate so remove it at your peril :slight_smile: (If you do remove it then make sure you set some sensible focus styles for keyboard users -also assuming your dropdown is keyboard friendly).