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 · Accepted 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

Remove blue border from css custom-styled button in Chrome

The Solution to Remove blue border from css custom-styled button in Chrome is

Most Viewed Questions: