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    x000D   x000D  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   lt input type  button  value  Example Button  gt  x000D   x000D   x000D

User · Answer

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.

User · Answer

It s also good note that outline  none can be applied to both  lt button gt  tags and input type button  to remove the browser-applied border on click

User · Answer

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

User · Answer

using outline none  we can remove that border in chrome   lt style gt  input type  button         width 120px      height 60px      margin-left 35px      display block      background-color gray      color white      border  none      outline none     lt  style gt

User · Answer

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

User · Answer

button focus outline none  important     add  important if it is used in Bootstrap

User · Answer

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

User · Answer

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

User · Answer

Given the html below     lt button class  btn-without-border  gt  Submit  lt  button gt    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

User · Answer

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

User · Answer

It works for me simply       focus       outline  0  important

User · Answer

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    x000D   x000D  input type  submit   focus   x000D      outline  none  important  x000D      background-color  rgb 208  192  74   x000D    x000D   x000D   x000D

User · Answer

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

User · Answer

This one worked for me  button focus       border  none      outline  none

User · Answer

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

[css] How To Remove Outline Border From Input Button

Examples related to css

Examples related to button