Disable blue stroke effect on button clicked

Question

I have a button defined as follows:

<button style={{backgroundColor: 'transparent', border: 0}} onClick={() => back()}>
   <i style={{color: '#3a6464'}} className='fa fa-arrow-circle-left fa-fw fa-3x'/>
</button>

When I click the icon button I get a blue stoke effect:

How can I disable this effect or at least change the blue color?

Set `outline: none` for `button` in css. – Mohammad Usman Jun 23 '19 at 06:35 — Mohammad Usman, Jun 23 '19 at 06:35

racamp101 · Accepted Answer · 2019-06-25T17:02:53.260

1

remove the focus css:

button:focus {outline:0;}

For touchscreens:

@media (hover: hover) {
    button:hover {
        outline:0;
    }
}

edited Jun 25 '19 at 17:02

answered Jun 23 '19 at 06:36

racamp101

506
2
12

this doesn't seem to work when the click doesn't result in the button not appearing on screen anymore (i.e navigation), still getting blue box – Mugen Jun 24 '19 at 10:14
@Mugen I apologize I'm not understanding your comment. Could you explain more? – racamp101 Jun 25 '19 at 04:34
I was missing some information there, the simplified case is this: in touch screens, where chrome adds accessibility features, and the button callback does nothing, I'm still getting a blue border – Mugen Jun 25 '19 at 06:32
I added to my answer try that out – racamp101 Jun 25 '19 at 17:03
the following worked for me: https://stackoverflow.com/a/21003770/1236401 , I'll try out your solution as well. thank you very much! – Mugen Jun 26 '19 at 06:54

Disable blue stroke effect on button clicked

1 Answers1