Remove blue border from css custom-styled button in Chrome

Question

I m working on a web page  and I want custom-styled  lt button gt  tags  So with CSS  I said  border  none  Now it works perfectly in safari  but in chrome  when I click one of the buttons  it puts an annoying blue border around it  I thought button active   outline  none   or button focus   outline none   would work  but neither do  Any ideas    This is what it looks like before being clicked  and how I want it to still look after being clicked      And this is the border I m talking about     Here is my CSS   button launch       background-color   F9A300      border  none      height  40px      padding  5px 15px      color   ffffff      font-size  16px      font-weight  300      margin-top  10px      margin-right  10px     button launch hover       cursor  pointer      background-color   FABD44     button change       background-color   F88F00      border  none      height  40px      padding  5px 15px      color   ffffff      font-size  16px      font-weight  300      margin-top  10px      margin-right  10px     button change hover       cursor  pointer      background-color   F89900     button active       outline  none      border  none

User · Answer

In my instance of this problem I had to specify box-shadow  none  button focus     outline none    box-shadow  none

User · Answer

Wait  There s a reason for that ugly outline   Before removing that ugly blue outline  you may want to take accessibility into consideration  By default  that blue outline is placed on focusable elements  This is so that users with accessibility issues are able to focus that button by tabbing to it  Some users do not have the motor skills to use a mouse and must use only the keyboard  or some other input device  for computer interaction  When you remove the blue outline  there is no longer a visual indicator on what element is focused  If you are going to remove the blue outline  you should replace it with another type of visual indication that the button is focused   Possible Solution  Darken Buttons when focused  For the examples below  Chrome s blue outline was first removed by using button focus   outline 0  important     Here are your basic Bootstrap buttons as they appear normally    Here are the buttons when they receive focus    Here the buttons when they are pressed    As you can see  the buttons are a little darker when they receive focus  Personally  I would recommend making the focused buttons even darker so that there is a very noticeable difference between the focused state and the normal state of the button   It s not just for disabled users  Making your site more accessible is something that is often overlooked but can help create a more productive experience in your website  There are many normal users that use keyboard commands to navigate through websites in order to keep hands on the keyboard

User · Answer

Ok  even with the risk of never getting anyone to see this  because there are already so many answers I wanted to offer more js solutions as of the year 2020 there are plenty   outline js or alternatively outliner js both libraries solving exactly the issues we all have here  remove outlines for mice but keep keyboard functionality or accessability   So instead of deciding which is more important style or accessability  choose both

User · Answer

for this problem     use this                  -webkit-tap-highlight-color  rgba 0 0 0 0            -webkit-tap-highlight-color  transparent     For some Androids            result

User · Answer

Removing outline is terrible for accessibility  Ideally  the focus ring shows up only when the user intends to use the keyboard   Use  focus-visible  It s currently a W3C proposal for styling keyboard-only focus using CSS  and is supported in Firefox  caniuse   Until other major browsers support it  you can use this robust polyfill      Remove outline for non-keyboard  focus      focus not  focus-visible      outline  none        Optional  Customize  focus-visible     focus-visible     outline-color  lightgreen      I also wrote a more detailed post just in case you need more info

User · Answer

try this code for all element which have blue border problem     outline  none      or     outline-style  none

User · Answer

The fix for Chrome and other browsers  button focus   outline  none  important  box-shadow  none  important

User · Answer

This is what worked for me   button focus       box-shadow none

User · Answer

Use either this    active       outline none      or this if that doesn t work     active      outline none  important      This works for me  FF and Chrome  at least   Instead of targeting the  focus state  just target the  active state and that will remove the aesthetically obtrusive highlighting in your browser when a user clicks a link  But it will still retain the focus states when a user with disabilities tabs or shift-tabs through a page  Both parties are happy

User · Answer

Add this in your CSS file        -webkit-tap-highlight-color  rgba 0  0  0  0   important

User · Answer

Most of the solutions will not work if you re using Bootstrap 4 1 and possibly other versions   After much head banging  I discovered you need to apply the shadow-none class    lt button class  btn shadow-none  gt Bootstrap  4 1  button without shadow lt  button gt

User · Answer

Doing this is not recommended as it regresses the accessibility of your site  for more info  see this post   That said  if you insist  this CSS should work   button focus  outline 0     Check it out or JSFiddle  http   jsfiddle net u4pXu   Or in this snippet    x000D   x000D  button launch   x000D  background-color   F9A300  x000D  border  none  x000D  height  40px  x000D  padding  5px 15px  x000D  color   ffffff  x000D  font-size  16px  x000D  font-weight  300  x000D  margin-top  10px  x000D  margin-right  10px  x000D    x000D   x000D  button launch hover   x000D  cursor  pointer  x000D  background-color   FABD44  x000D    x000D   x000D  button launch   x000D  background-color   F9A300  x000D  border  none  x000D  height  40px  x000D  padding  5px 15px  x000D  color   ffffff  x000D  font-size  16px  x000D  font-weight  300  x000D  margin-top  10px  x000D  margin-right  10px  x000D    x000D   x000D  button launch hover   x000D  cursor  pointer  x000D  background-color   FABD44  x000D    x000D   x000D  button change   x000D  background-color   F88F00  x000D  border  none  x000D  height  40px  x000D  padding  5px 15px  x000D  color   ffffff  x000D  font-size  16px  x000D  font-weight  300  x000D  margin-top  10px  x000D  margin-right  10px  x000D    x000D   x000D  button change hover   x000D  cursor  pointer  x000D  background-color   F89900  x000D    x000D   x000D  button active   x000D  outline  none  x000D  border  none  x000D    x000D   x000D  button focus  outline 0   x000D   lt button class  launch  gt Launch with these ads lt  button gt   x000D   lt button class  change  gt Change lt  button gt  x000D   x000D   x000D

User · Answer

I just remove the outline from all the tags in the page by selecting all and applying outline none to everything      focus  outline none    As bagofcole mentioned  you might need to add  important as well  so the style will look like this     focus  outline none  important

User · Answer

I faced the same issue so I used simple CSS-   custom-button       outline  none

User · Answer

This is an issue in the Chrome family and has been there forever    A bug has been raised https   bugs chromium org p chromium issues detail id 904208  It can be shown here  https   codepen io anon pen Jedvwj as soon as you add a border to anything button-like  say role  button  has been added to a tag for example  Chrome messes up and sets the focus state when you click with your mouse   I highly recommend using this fix  https   github com wicg focus-visible   Just do the following  npm install --save focus-visible   Add the script to your html    lt script src   node modules focus-visible dist focus-visible min js  gt  lt  script gt    or import into your main entry file if using webpack or something similar   import  focus-visible dist focus-visible min     then put this in your css file      hide the focus indicator if element receives focus via mouse  but show on keyboard focus  on tab    js-focus-visible  focus not  focus-visible      outline  none        Define a strong focus indicator for keyboard focus     If you skip this then the browser s default focus indicator will display instead    ideally use outline property for those users using windows high contrast mode  js-focus-visible  focus-visible     outline  magenta auto 5px      You can just set   button focus  outline 0     but if you have a large number of users  you re disadvantaging those who cannot use mice or those who just want to use their keyboard for speed

User · Answer

If you want to delete same effect in input  you could add the following code as well as button   input focus  outline 0

User · Answer

Simply write outline none   No need to use pseudo element focus

User · Answer

Another way to solve the accessibility problem that hasn t been mentioned here yet is through a little bit of Javascript  Credits go this insightful blogpost from hackernoon  https   hackernoon com removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2  The approach here is really simple yet effective  Adding a class when people start using the tab-key to navigate the page  and optionally remove it when the switch to mouse again  Then you can use this class to either display a focus outline or not   function handleFirstTab e        if  e keyCode     9       the  I am a keyboard user  key         document body classList add  user-is-tabbing            window removeEventListener  keydown   handleFirstTab            window addEventListener  keydown   handleFirstTab

User · Answer

For anyone using Bootstrap and having this problem  they use  active focus as well as just  active and  focus so you ll need   element active focus       outline  0      Hopefully saved someone some time figuring that one out  banged my head for bit wondering why such a simple thing wasn t working

User · Answer

Don t forget the  important declaration  for a better result  button focus  outline 0  important     A rule that has the  important property will always be applied no matter where that rule appears in the CSS document

User · Answer

I had the same problem with bootstrap  I solved with both outline and box-shadow   btn focus   btn focus       outline  none  important      box-shadow  0 0 0 0 rgba 0  123  255  0   important     or none

User · Answer

Until all modern browsers will start support css-selector  focus-visible  the simplest and possibly best way to save accessibility is to remove this tricky focus only for mouse users and to save it for keyboard users   1 Use this tiny polyfill  about 10kb   https   github com WICG focus-visible 2 Add next code somewhere in your css       js-focus-visible  focus not  focus-visible      outline  none      Browser-support of css4-selector  focus-visible right now very weak  https   caniuse com  search focus-visible

[css] Remove blue border from css custom-styled button in Chrome

Examples related to css

Examples related to google-chrome