Menu icon Foundation
Avoiding the unexpected outlining in Chrome!

Hi everyone!
I noticed that there is unexpected outlining over some elements in Chrome browser, such as: button and ul and others!

F1

Check it here: http://foundation.zurb.com/docs/components/dropdown_buttons.html

And after the debugging, I noticed that Chrome browser adds this code :

:focus {
outline: -webkit-focus-ring-color auto 5px;
}

F2

If you are facing that issue, you can simply add this pseudo-class globally:

:focus{
    outline: none !important;
}     

That will override Chrome's default value.

So far, I didn't test all the other Foundation's components if they got any side effect after adding that global pseudo-class.

Regards,

Unexpectedoutlineul-webkit-focus-ring-color

Hi everyone!
I noticed that there is unexpected outlining over some elements in Chrome browser, such as: button and ul and others!

F1

Check it here: http://foundation.zurb.com/docs/components/dropdown_buttons.html

And after the debugging, I noticed that Chrome browser adds this code :

:focus {
outline: -webkit-focus-ring-color auto 5px;
}

F2

If you are facing that issue, you can simply add this pseudo-class globally:

:focus{
    outline: none !important;
}     

That will override Chrome's default value.

So far, I didn't test all the other Foundation's components if they got any side effect after adding that global pseudo-class.

Regards,