when click somewhere else the border disappears, tried onfocus none, but didn't help, how to make ugly button border disappear when click on?
input[type="button"] {_x000D_
width: 120px;_x000D_
height: 60px;_x000D_
margin-left: 35px;_x000D_
display: block;_x000D_
background-color: gray;_x000D_
color: white;_x000D_
border: none;_x000D_
}
_x000D_
<input type="button" value="Example Button">
_x000D_
It works for me simply :)
*:focus {
outline: 0 !important;
}
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;
}
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 {_x000D_
outline: none !important;_x000D_
background-color: rgb(208, 192, 74);_x000D_
}
_x000D_
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.
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);
}
input[type="button"]{
outline:none;
}
input[type="button"]::-moz-focus-inner {
border: 0;
}
/* Don't forget! User accessibility is important */
input[type="button"]:focus {
/* your custom focused styles here */
}
button:focus{outline:none !important;}
add !important
if it is used in Bootstrap
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>
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;
}
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.
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.
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.
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.
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.
This one worked for me
button:focus {
border: none;
outline: none;
}
Source: Stackoverflow.com