11

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>
Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
plmk
  • 1,604
  • 1
  • 13
  • 18
  • Checked in Chrome / firefox – plmk Mar 18 '19 at 11:16
  • Tried with CSS filters. But they are only applicable to real images. – plmk Mar 18 '19 at 11:18
  • 2
    Possible duplicate of [Color for Unicode Emoji](https://stackoverflow.com/questions/32413731/color-for-unicode-emoji) – Amit Mar 18 '19 at 11:22
  • Thank you Amit for your suggestion. The linked issue is interesting but it is not the same problem and have different solutions than the ones listed here: Think on a football and baseball emojis: - Greying it out should keep the internal shapes with just grey colors (actual grey out meaning); balls are distinguishable - With your solution, we just get a one color shape with no internal shapes; football and basketballs become indistinct black circles – plmk Apr 09 '19 at 15:28

2 Answers2

16

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

Nick Parsons
  • 38,409
  • 6
  • 31
  • 57
  • 1
    Any text editor that mangles emoji *is a bad tool that should not be used*. If it mangles emoji, it’s very likely to be mangling other things too, since it clearly has fundamental encoding problems. I therefore strongly disagree with your suggestion, which makes more work for everyone for no manifestly good reason. (And everything should be using UTF-8 already.) – Chris Morgan Sep 08 '19 at 12:37
7

You can use text shadow

 <button disabled> _myText </button>

    <p style="color:transparent; text-shadow: 0 0 0 grey;">
      _myText2
    </p>
Amit
  • 3,010
  • 2
  • 25
  • 31