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

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.

Answer 2

This one worked for me

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

Answer 3

Focus outlines in Chrome and FF

removed:

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

Demo

Accessibility (A11Y)

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

Answer 4

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.

Answer 5

using outline:none; we 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>

Answer 6

To avoid the problem caused when you change the outline property on a focus, is tho 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);
}