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=" ">Solution 1 :
Solution 2 :
.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.
Problem :
<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.
Comments
Comment posted by Khush Chauhan
The css of the input tag “` .PlayPause { display: block; border: none; width: 242px; color:rgb(173, 142, 39); background-color:rgb(250, 208, 70); height: 35; font-size: 30px; border-radius: 2px; line-height: 15px; }“`
Comment posted by Someone_who_likes_SE
Emojis look different on different devices. I would recommend you make an image that looks like your favorite pause emoji and using that instead of the emoji.