Grey out emoji characters (HTML / CSS)

问题

My current issue is that I am trying to grey out a button with emojis in it.

Nevertheless it seems that, due the nature of emojis, it is not possible to change the color using HTML / CSS properties.

I.e.:

<button disabled> 🎨_myText </button>

<p style="color:grey">
  👎_myText2
</p>

回答1:

If you're looking to just change the Emoji colour to grey, you can do so using filter: grayscale:

<button style="filter: grayscale(100%);" disabled>&#127912;_myText</button>

<p style="color:grey; filter: grayscale(100%);">&#128078;_myText2</p>

As a side note, I suggest you use HTML entities for representing Emojis. Not all text editors support Emojis and so they may become corrupt if opened in one. You can use this unicode lookup to find the HTML entity version of your Unicode characters.

If you wish to colour your Emojis in other colours see this answer

回答2:

You can use text shadow

<button disabled> 🎨_myText </button>

<p style="color:transparent; text-shadow: 0 0 0 grey;">
  👎_myText2
</p>

来源：https://stackoverflow.com/questions/55220093/grey-out-emoji-characters-html-css