When I tap one of the buttons via mobile, there is a white flash, how do I disable or remove that?

HTML & CSS
1

Does anyone on here know what I am referring to?

https://jsfiddle.net/xmdq14a2/1/

To reproduce, tap one of the buttons on a mobile device.

Only occurs via mobile not desktop.

I think it may be this?

:active

How would I disable it from occurring when tapping a button?

What would I put inside here?

 button:active{

 }

or, maybe that is not it.

It was something I noticed and was wondering why it was there, and can it be removed?

Chrome mobile phone. android.

testing: https://jsfiddle.net/tpq7gkbf/

This seems to work.

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
  /* For iOS */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* For Android */
  outline: none;
  /* To remove focus outline */
}

This is all I would need then.

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

I just have buttons and links.

But should I even be using it?

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color

I tested it and it seems to work fine on my phone.

no issues.

3

Except that I don’t know if I tapped on it or not now that you removed the highlight. It’s put there for a reason and you just removed it.:frowning:

On mobile you scroll by touching the screen and dragging down. You really need a user to know whether they’ve accidentally clicked on a link or not.

1 Like
4

I am just using buttons for the modal videos that pop up and the links.

Then, what about,

Keeping it on the links, removing it from the button links?

I already have this on the buttons:

.played {
  border-color: #0a58ca;
  background-color: #0056b3;
  box-shadow: 0 0 0 2px rgb(255 0 0 / 100%);
}

That is added each time they are pressed.

And I have hover:

.btnA:hover,
.btnB:hover {
  background-color: #0056b3;
  color: #ffffff;
}

I could probably do something similar for the links.

Using these:

:active

:focus

I added this to the video buttons.


function addPlayerToButtons() {
    const modalButtons = document.querySelectorAll(".playButtonA");
    modalButtons.forEach(function(button, index) {
      button.addEventListener("click", function(event) {
        modalButtons.forEach(function(markAsPlayed) {
          markAsPlayed.classList.remove("played");
        });
        button.classList.add("played");
        //const target = event.currentTarget.dataset.destination;
        //openModal(target);
        openModal(event.currentTarget.dataset.destination);
        if (index === 0) {
          players.add(".buttonA", {
            list: "PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq",
            listType: "playlist",
            shuffle: true
          });
        } else if (index === 1) {
          players.add(".buttonB", {
            videoId: "CHahce95B1g"
          });
        }
      });
    });
  }
  addPlayerToButtons();
}());
5

With the a links I can do this: https://jsfiddle.net/w0e47g1k/4/

Is this good?

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

.btnD:hover {
    background-color: #121212;
}

.btnD:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(47, 254, 185, 0.5);
}

links

Full video code: https://jsfiddle.net/ybduh8on/

button, a {
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


.btnD:hover {
    background-color: #121212;
}

.btnA:focus,
.btnD:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(47, 254, 185);
}

visuals

If I am using other visual indicators instead, then I can use this:

-webkit-tap-highlight-color: transparent;