How To Remove Outline Border From Input Button

Question

when click somewhere else the border disappears, tried onfocus none, but didn\'t help, how to make ugly button border disappear when click on?

相关标签:

Answer 1

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

Answer 2

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

Answer 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.

Answer 4

It works for me simply :)

*:focus {
    outline: 0 !important;
}

Answer 5

button:focus{outline:none !important;}

add !important if it is used in Bootstrap

Answer 6

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.