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

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/

score 8 · Accepted Answer · answered Jul 21 '16 at 16:14

8

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

button:focus{
outline: none;
}

answered Jul 21 '16 at 16:14

Miles

764
2
11
20

That fixed my problem, thanks for answering so quickly! – James Boehme Jul 21 '16 at 16:15
Happy to help. You'll see that it doesn't do this in some other browsers. This is mainly a Chrome thing. – Miles Jul 21 '16 at 16:16

score 2 · Answer 2 · answered Jul 21 '16 at 16:14

2

Here you go:

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

Fiddle

answered Jul 21 '16 at 16:14

dodopok

868
14
22

score 2 · Answer 3 · answered Jul 21 '16 at 16:14

2

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

answered Jul 21 '16 at 16:14

user3163495

2,425
2
26
43

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

3 Answers3