Menu
I have a Burger Menu Button which is selectable via TAB. When I click on it and the menu opens up the burger has this blue outline to make it clear that it is focused. I don't want to remove that blue outline, because it helps vision impaired people and for tab selection it is also great, but is there a smart way to remove the blue outline only when someone clicks on it via mouse. Just asthetics...
Thanks for your answer.
cheers
868
Just add a:visited { outline: none; } in your style file.
If you want to remove the focus around a button, you can use the CSS outline property. You need to set the “none” value of the outline property.
The solution is adding “outline: none;” to the selector. And for Google Chrome if you're using Bootstrap, then add ! important after it to push your changes in the file due to overrule issue.
As you pointed out, the blue outline is here for accessibility reasons.
If you click on the element, the keyboard focus will also move to that element.
So users have to know that the keyboard focus has been moved to that element.
Some people with disabilities may want to jump to a particular tab using the mouse, but then use their keyboard for easiness reasons.
177
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
