When I click on my HTML button, a blue "selection" border is displayed [duplicate]

Question

I created this HTML button, and after styling it with CSS, every time it's clicked a blue selection border appears around it. Is there any way to fix this? I know that the default unchanged element does not do this when i create it, so I'm thinking it must have something to do with the CSS I added.

HTML:

<button type="button" class="drop-button" >-</button>

CSS:

.drop-button {
    background-color: #343436;
    color: #FFFFFF;
    border: none;
    border-radius: 5px;
    margin-right: 8px;
    margin-left: 4px;
    height: 20px;
    width: 25px;
    font-size: 20px;
    vertical-align: middle;
    line-height: 0px;
}

Here is a link to it. http://jsfiddle.net/xytxnpyt/

Answer 1

This is the default behavior of Chrome. You can turn it off with this...

button:focus{
outline: none;
}

Answer 2

Here you go:

.drop-button:focus {
    outline: 0;
}

Fiddle

Answer 3

Although I could not reproduce the blue selection border you are talking about in JSFiddle, try adding "outline-width:0px;" to the button's CSS and see if that does anything