Menu
If you want to remove the focus around a button, you can use the CSS outline property. You need to set the “none” value of the outline property.
padding: 0; border: none; background: none; to your buttons.
Answer: Use CSS outline property In Google Chrome browser form controls like <input> , <textarea> and <select> highlighted with blue outline around them on focus. This is the default behavior of chrome, however if you don't like it you can easily remove this by setting their outline property to none .
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>
Focus outline in Chrome and FF:
removed button focus outline:
input[type=button] {
outline:none;
}
input[type=button]::-moz-focus-inner {
border: 0;
}
/*
Accessibility (A11Y)
Don't forget! User accessibility is important
*/
input[type=button]:focus {
/* your custom focused styles here */
}
It works for me simply :)
*:focus {
outline: 0 !important;
}
This one worked for me
button:focus {
border: none;
outline: none;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With