How to remove outline border from input button

Question

When I click somewhere else the border disappears, I tried to use onfocus: none, but that didn't help. How to make this ugly button border disappear when I click on it?

input[type=button] {
  width: 120px;
  height: 60px;
  margin-left: 35px;
  display: block;
  background-color: gray;
  color: white;
  border: none;
}

<input type="button" value="Example Button">

The focus rectangle is supposed to help the user observe that the click was effective and thereby prevent him from accidentally clicking twice. So are you sure you are solving a problem and not creating one? — Jukka K. Korpela, Nov 10 '13 at 06:43
A good read http://a11yproject.com/posts/never-remove-css-outlines/ — Taimur Khan, May 25 '15 at 06:10

score 313 · Answer 1 · edited Nov 27 '21 at 21:33

313

Using outline: none; you can remove that border in chrome.

<style>
input[type=button] {
    width: 120px;
    height: 60px;
    margin-left: 35px;
    display: block;
    background-color: gray;
    color: white;
    border: none;
    outline: none;
}
</style>

edited Nov 27 '21 at 21:33

Patrick W. McMahon

3,488
1
20
31

answered Nov 10 '13 at 06:14

Ankit Agrawal

6,034
6
25
49

33

On Chrome, I had to add `outline: none;` rule to `input[type="button"]:focus` rather than `input[type="button"]`. – mc9 May 25 '16 at 01:58
Works in Microsoft Edge too – Jon Eldridge Aug 19 '21 at 14:24

Roko C. Buljan · Answer 2 · 2022-10-09T17:51:50.250

102

Focus outline in Chrome and FF:

Remove Chrome button outline in CSS Remove Firefox button outline in CSS

removed button focus outline:

Button without outline in CSS

button,
input[type=button] {
  outline: none;
}
button::-moz-focus-inner,
input[type=button]::-moz-focus-inner {
  border: 0;
}

/*
  Accessibility (A11Y)
  Don't forget! User accessibility is important
*/
button:focus,
input[type=button]:focus {
  /* your custom focused styles here */
}

edited Oct 09 '22 at 17:51

answered Nov 10 '13 at 06:17

Roko C. Buljan

196,159
39
305
313

X-Coder · Answer 3 · 2015-05-25T06:05:31.213

95

It works for me simply :)

*:focus {
    outline: 0 !important;
}

edited May 25 '15 at 06:05

answered Dec 01 '14 at 09:29

X-Coder

2,632
2
19
17

6

This is the only answer that worked for me, but how would you do it without !important? I've heard from a lot of sources that you should only use it only if absolutely necessary. – Jay Jun 24 '15 at 17:04
I did this button styling for whole application in external css. If u want ignore it u can do it with #id in css using that in each button: #button-tyle{ outline: 0; } or use same style for all buttons without #id in each button, here is a demo [link](http://plnkr.co/edit/OR7kviKn4XMnd9jQ4wvS?p=preview): input[type="button"] { width:70px; height:30px; margin-left:72px; margin-top:15px; display:block; background-color:gray; color:white; border: none; outline: 0; } – X-Coder Jul 07 '15 at 04:53
To remove blue background color onclick i added -> *{ -webkit-tap-highlight-color: transparent !important; } – gtamborero Dec 12 '20 at 16:12
2

This worked first time perfectly - Thanks! – Ashok Jingar Feb 22 '21 at 11:25

score 37 · Answer 4 · edited Nov 27 '21 at 21:34

37

Set both the outline and the box-shadow properties of the button to none and make them important.

input[type=button] {
    outline: none !important;
    box-shadow: none !important;
}

The reason for setting the values to **important** is that, if you are using other CSS libraries or frameworks like Bootstrap, it might get overridden.

edited Nov 27 '21 at 21:34

Patrick W. McMahon

3,488
1
20
31

answered Jun 13 '20 at 15:11

Eyoab

725
9
10

The `box-shadow` works for me on Edge, nice : ) – NeoZoom.lua Jul 19 '21 at 14:12

mnis.p · Answer 5 · 2018-06-14T05:25:51.040

34

This one worked for me

button:focus {
    border: none;
    outline: none;
}

edited Jun 14 '18 at 05:25

answered Jun 08 '17 at 20:27

mnis.p

451
4
9

score 18 · Answer 6 · answered Apr 28 '16 at 10:34

The outline property is what you need. It's shorthand for setting each of the following properties in a single declaration:

outline-style
outline-width
outline-color

You could use outline: none;, which is suggested in the accepted answer. You could also be more specific if you wanted:

button {
    outline-style: none;
}

score 11 · Answer 7 · edited Mar 29 '19 at 04:24

11

button:focus{outline:none !important;}

add !important if it is used in Bootstrap

edited Mar 29 '19 at 04:24

Gourav

2,746
5
28
45

answered Mar 09 '19 at 02:30

user11173874

129
1
3

1

I think the asker already tried this, after all, the question says `tried onfocus none, but didn't help`. – JJJ Mar 09 '19 at 02:56

score 5 · Answer 8 · edited Nov 27 '21 at 21:35

5

To avoid the problem caused when you change the outline property on a focus, is to give a visual effect when the user Tab on the input button or click on it.

In this case is a submit type, but you can apply to a type="button" too.

input[type=submit]:focus {
    outline: none !important;
    background-color: rgb(208, 192, 74);
}

edited Nov 27 '21 at 21:35

Patrick W. McMahon

3,488
1
20
31

answered Oct 04 '19 at 17:38

A.Peralta

69
1
3

Mwiza · Answer 9 · 2019-02-07T16:34:04.847

3

Given the html below:

<button class="btn-without-border"> Submit </button>

In the css style do the following:

.btn-without-border:focus {
    border: none;
    outline: none;
}

This code will remove button border and will disable button border focus when the button is clicked.

edited Feb 07 '19 at 16:34

answered Jun 04 '18 at 07:08

Mwiza

7,780
3
46
42

score 3 · Answer 10 · answered Feb 07 '19 at 16:51

As many others have mentioned, selector:focus {outline: none;} will remove that border but that border is a key accessibility feature that allows for keyboard users to find the button and shouldn't be removed.

Since your concern seems to be an aesthetic one, you should know that you can change the color, style, and width of the outline, making it fit into your site styling better.

selector:focus {
  outline-width: 1px;
  outline-style: dashed;
  outline-color: red;
}

Shorthand:

selector:focus {
  outline: 1px dashed red;
}

score 3 · Answer 11 · answered Mar 11 '19 at 13:21

3

It's greatly simple than you think. When the button is focussed, apply the outline property, like this:

button:focus {
    outline: 0 !important;
}

But when I use none value, it doesn't work for me.

answered Mar 11 '19 at 13:21

Gourav

2,746
5
28
45

score 3 · Answer 12 · answered Dec 23 '19 at 05:59

Removing nessorry accessible event not a good idea in up to standard web developments. either way if you looking for a solution removing just the outline doesn't solve the problem. you also have to remove the blue color shadow. for specific scenarios use a separate class name to isolate the this special style to your button.

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

Better do this

.remove-border.focus, .remove-border:focus {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
 }

score 2 · Answer 13 · answered Apr 27 '18 at 14:29

Removing the outline is an accessibility nightmare. People tabbing using keyboards will never know what item they're on.

Best to leave it, as most clicked buttons will take you somewhere anyway, or if you HAVE to remove the outline then isolate it a specific class name.

.no-outline {
  outline: none;
}

Then you can apply that class whenever you need to.

score 2 · Answer 14 · answered Nov 08 '20 at 10:51

2

Another alternative to restore outline when using the keyboard is to use :focus-visible. However, this doesn't work on IE :https://caniuse.com/?search=focus-visible.

answered Nov 08 '20 at 10:51

myk

73
5

score 0 · Answer 15 · answered Feb 21 '21 at 16:50

0

It's also good note that outline: none can be applied to both <button> tags and input[type=button] to remove the browser-applied border on click.

answered Feb 21 '21 at 16:50

Nick Alico

1

score 0 · Answer 16 · edited Nov 27 '21 at 21:33

0

Since Chrome and Mozilla added this line not only around buttons but also around linked text, I use on my site this:

a:focus {outline: none;
}

Works for both browsers, links, and buttons.

Btw, this did not (27.4.2021):

input[type=button]{
   outline:none;
}
input[type=button]::-moz-focus-inner {
   border: 0;
}

edited Nov 27 '21 at 21:33

Patrick W. McMahon

3,488
1
20
31

answered Apr 27 '21 at 15:18

Martin

1

How to remove outline border from input button

16 Answers16

Linked

Related