Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove outline border from input button

Tags:

css

button

People also ask

How do I get rid of the outline button?

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.

How do I hide the border of a button?

padding: 0; border: none; background: none; to your buttons.

How do you remove an outline in HTML?

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:

Remove Chrome button outline in CSSRemove Firefox button outline in CSS

removed button focus outline:

Button without outline in CSS

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