14

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,738
  • 21
  • 105
  • 131
plmk
  • 2,194
  • 1
  • 15
  • 21
  • 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

20

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>_myText</button>

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

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

Nick Parsons
  • 45,728
  • 6
  • 46
  • 64
  • 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
8

You can use text shadow

 <button disabled> _myText </button>

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

Update: This just shows the shadow of character, using filter: is better idea in most cases

Amit
  • 3,662
  • 2
  • 26
  • 34