How do I eliminate the square backgrounds that are shown in an icon whe it's clicked?

Question

I have built a navigation for a mobile website, but i have noticed that when i click the bar icon it shows a square background around it, and i don't know how to eliminate that. if someone knows the answer, please let me know.

here is the website so you can see what I'm telling you: https://codepen.io/-kjh97-/full/KKmmqzo it only shows the squares in mobile.

I have tried with:

.fas:focus{
outline: none;
};

but it doesn't work.

Does this answer your question? [How to remove the blue highlight of button on mobile?](https://stackoverflow.com/questions/45049873/how-to-remove-the-blue-highlight-of-button-on-mobile) — Pascal K, Jul 16 '21 at 22:33

score 3 · Answer 1 · answered Jul 16 '21 at 22:06

The outline you are seeing is not relative to the icon, but rather to the button. Thus, adding outline: none to your button should work.

However, the outline exists for accessibility purposes, so that removing it could cause problems for people who use the keyboard to trigger buttons, for example. If you remove the default outline, it's recommended to add a custom one, which is more suitable to your page design.

Thanks, I'll follow your advice. it was a good answer. – Keiber hernandez Jul 19 '21 at 15:20 — Keiber hernandez, Jul 19 '21 at 15:20

score 0 · Accepted Answer · answered Jul 16 '21 at 22:29

0

button {
  -webkit-tap-highlight-color: transparent;
}

This should do!

All other outline options should be enabled either to default or to a custom outline for accessibility.

answered Jul 16 '21 at 22:29

Pascal K

128
1
10

Thanks. thought it was the icon, silly me. – Keiber hernandez Jul 19 '21 at 15:22

How do I eliminate the square backgrounds that are shown in an icon whe it's clicked?

2 Answers2