CODEWITHSUNDEEP
cssbutton
Cindy Turlington
Cindy Turlington

Reputation: 2527

How to remove outline border from input button

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">

Upvotes: 222

Views: 569676

Answers (17)

Ramakrishna Hegde
Ramakrishna Hegde

Reputation: 1

Use the below css:

.btn {
  border: none !important;
  background-color: white;
}

Try with this, you have to make

border: none !important

Upvotes: -1

Roko C. Buljan
Roko C. Buljan

Reputation: 206024

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 */
}

Upvotes: 104

A.Peralta
A.Peralta

Reputation: 89

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);
}

Upvotes: 7

Eyoab
Eyoab

Reputation: 755

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.

Upvotes: 39

Ankit Agrawal
Ankit Agrawal

Reputation: 6124

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>

Upvotes: 318

Martin
Martin

Reputation: 1

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;
}

Upvotes: 0

Nick Alico
Nick Alico

Reputation: 1

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.

Upvotes: -1

myk
myk

Reputation: 73

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.

Upvotes: 2

asith
asith

Reputation: 539

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);
 }

Upvotes: 3

user11173874
user11173874

Reputation: 139

button:focus{outline:none !important;}

add !important if it is used in Bootstrap

Upvotes: 12

Gourav
Gourav

Reputation: 2819

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.

Upvotes: 3

dave
dave

Reputation: 2936

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;
}

Upvotes: 3

Mwiza
Mwiza

Reputation: 8951

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.

Upvotes: 3

mnis.p
mnis.p

Reputation: 451

This one worked for me

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

Upvotes: 34

martinedwards
martinedwards

Reputation: 5825

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.

Upvotes: 2

henrywright
henrywright

Reputation: 10240

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;
}

Upvotes: 18

X-Coder
X-Coder

Reputation: 2736

It works for me simply :)

*:focus {
    outline: 0 !important;
}

Upvotes: 94

Related Questions