how to remove the colour from the emoji without CSS

Question

<input type="submit" data-id="TaskStatus" class="PlayPause" id="TaskStatus"  onclick="PauseChange();" value="⏸" > 

how can I remove the colour from this emoji so that the CSS can allow it to blend in with the rest of the button? it already has CSS applied to it, but that changes the colour when it's clicked, but I'd want it to be the colour chosen in the CSS by default. I've tried to directly style the input but that doesn't seem to work.

Answer 1

You can apply filter: grayscale(100%) to make the emote black and white:

input {
  filter: grayscale(100%);
}

<input type="submit" data-id="TaskStatus" class="PlayPause" id="TaskStatus" onclick="PauseChange();" value="😊">