How to remove focus rectangle from an html input/button?

Question

I got this input button ( type="button" ) on my page:

When I click on it there is an annoying focus rectangle around:

How can I remove that?

Here is my code:

/*Buttons/Inputs*/
                    
.runInput {
   border-top: 1px solid #ffffff;
   background: #001cbd;
   background: -webkit-gradient(linear, left top, left bottom, from(#148bfa), to(#001cbd));
   background: -webkit-linear-gradient(top, #148bfa, #001cbd);
   background: -moz-linear-gradient(top, #148bfa, #001cbd);
   padding: 6.5px 13px;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   border-radius: 12px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #ffffff;
   font-size: 24px;
   font-family: Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   }
.runInput:hover {
   background: #001cbd;
   color: #d9d9d9;
   }
.runInput:active {
   background: #00046e;
   }
.runInput:focus {
   outline: 0;
}

<input class="runInput" onclick="runCode();" type="button" value="Run">

I tried to add outline: none; to my CSS but it didn't work.

Thanks in advance for your answers!

EDIT: I changed the snippet

Possible duplicate of [How to remove Firefox's dotted outline on BUTTONS as well as links?](https://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links) — Barun, Oct 29 '17 at 14:45
I tried clicking the button on the snippet and I didn't see the rectangle. I am using Chrome. What browser are you using? Might try out Barun's suggestion. — Cons7an7ine, Oct 29 '17 at 14:47
On which navigator do you experience your problem ? If it is Firefox, then the answer at the potential duplicate should solve your issue. — Pac0, Oct 29 '17 at 14:48
You were right, it was due to Firefox! I tried in another browser and it worked perfectly. — Thurinum, Oct 29 '17 at 14:53

Zahidul Islam Ruhel · Accepted Answer · 2018-07-16T12:20:53.297

6

Just add:

:focus {
    outline: 0 !important;
}

It will works for all element.

Or

If you need only for this class then add

.runInput:focus {
    outline: 0 !important;
}

edited Jul 16 '18 at 12:20

answered Oct 29 '17 at 16:45

Zahidul Islam Ruhel

1,114
7
17

score 0 · Answer 2 · answered Oct 29 '17 at 14:42

0

You should be able to achieve this with outline but it must be referenced correctly.

.runInput:focus {
    outline: 0;
}

OR

.runInput:focus {
    outline: none;
}

JSfiddle example

answered Oct 29 '17 at 14:42

redditor

4,196
1
19
40

How to remove focus rectangle from an html input/button?

2 Answers2