how to remove the colour from the emoji without CSS

user_15140984 0
Viewed 243

<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.

css html
2 Answers

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="">

user_142512210 

.PlayPause {
  filter: grayscale(100%)!important;
}
<input type="submit" data-id="TaskStatus" class="PlayPause" id="TaskStatus" onclick="PauseChange();" value="">

Adding to the answer given by Spectric if custom CSS is not getting applied, then you just need to add '!important' keyword at the end of CSS value, to give higher preference to your custom CSS.

Admin1
Related