Bsrhrki

Does convergence of polynomials imply that of its coefficients?

Why doesn't the chatan sign the ketubah?

Why are there no stars visible in cislunar space?

Would this string work as string?

Error in master's thesis, I do not know what to do

Why I don't get the wanted width of tcbox?

Do native speakers use "ultima" and "proxima" frequently in spoken English?

Would mining huge amounts of resources on the Moon change its orbit?

Should I be concerned about student access to a test bank?

Why is participating in the European Parliamentary elections used as a threat?

Would it be believable to defy demographics in a story?

Does fire aspect on a sword, destroy mob drops?

Splitting fasta file into smaller files based on header pattern

Exposing a company lying about themselves in a tightly knit industry: Is my career at risk on the long run?

Hackerrank All Women's Codesprint 2019: Name the Product

How can a new country break out from a developed country without war?

Jem'Hadar, something strange about their life expectancy

Isn't the word "experience" wrongly used in this context?

How much propellant is used up until liftoff?

Pre-Employment Background Check With Consent For Future Checks

Print a physical multiplication table

Would storms on an ocean world harm the marine life?

Air travel with refrigerated insulin

What is the reasoning behind standardization (dividing by standard deviation)?

Grey out emoji characters (HTML / CSS)

7

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>

html css colors emoji

share|improve this question

edited 6 hours ago

Peter Mortensen

13.8k1987113

asked 12 hours ago

Ikerlu.Ikerlu.

361

New contributor

Ikerlu. is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Checked in Chrome / firefox
  
  – Ikerlu.
  12 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Tried with CSS filters. But they are only applicable to real images.
  
  – Ikerlu.
  12 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Possible duplicate of Color for Unicode Emoji
  
  – Amit
  12 hours ago
  

  
  
  
  

add a comment | 

7

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>

html css colors emoji

share|improve this question

edited 6 hours ago

Peter Mortensen

13.8k1987113

asked 12 hours ago

Ikerlu.Ikerlu.

361

New contributor

Ikerlu. is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Checked in Chrome / firefox
  
  – Ikerlu.
  12 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Tried with CSS filters. But they are only applicable to real images.
  
  – Ikerlu.
  12 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Possible duplicate of Color for Unicode Emoji
  
  – Amit
  12 hours ago
  

  
  
  
  

add a comment | 

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>

html css colors emoji

share|improve this question

edited 6 hours ago

Peter Mortensen

13.8k1987113

asked 12 hours ago

Ikerlu.Ikerlu.

361

New contributor

Ikerlu. is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

<button disabled> 🎨_myText </button>

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

<button disabled> 🎨_myText </button>

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

<button disabled> 🎨_myText </button>

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

share|improve this question

edited 6 hours ago

Peter Mortensen

13.8k1987113

asked 12 hours ago

Ikerlu.Ikerlu.

361

New contributor

Ikerlu. is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

share|improve this question

edited 6 hours ago

Peter Mortensen

13.8k1987113

asked 12 hours ago

Ikerlu.Ikerlu.

361

New contributor

Ikerlu. is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

edited 6 hours ago

Peter Mortensen

13.8k1987113

edited 6 hours ago

Peter Mortensen

13.8k1987113

asked 12 hours ago

Ikerlu.Ikerlu.

361

New contributor

Ikerlu. is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

asked 12 hours ago

Ikerlu.Ikerlu.

361

2 Answers
2

active

oldest

votes

8

If you're looking to just change the emoji color 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>

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

share|improve this answer

edited 10 hours ago

answered 12 hours ago

Nick ParsonsNick Parsons

10k2926

add a comment | 

3

You can use text shadow

<button disabled> 🎨_myText </button>

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

share|improve this answer

answered 12 hours ago

AmitAmit

1,22211428

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

Ikerlu. is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55220093%2fgrey-out-emoji-characters-html-css%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

8

If you're looking to just change the emoji color 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>

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

share|improve this answer

edited 10 hours ago

answered 12 hours ago

Nick ParsonsNick Parsons

10k2926

add a comment | 

8

If you're looking to just change the emoji color 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>

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

share|improve this answer

edited 10 hours ago

answered 12 hours ago

Nick ParsonsNick Parsons

10k2926

add a comment | 

If you're looking to just change the emoji color 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>

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

share|improve this answer

edited 10 hours ago

answered 12 hours ago

Nick ParsonsNick Parsons

10k2926

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

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

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

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

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

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

share|improve this answer

edited 10 hours ago

answered 12 hours ago

Nick ParsonsNick Parsons

10k2926

answered 12 hours ago

Nick ParsonsNick Parsons

10k2926

answered 12 hours ago

Nick ParsonsNick Parsons

10k2926

3

You can use text shadow

<button disabled> 🎨_myText </button>

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

share|improve this answer

answered 12 hours ago

AmitAmit

1,22211428

add a comment | 

3

You can use text shadow

<button disabled> 🎨_myText </button>

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

share|improve this answer

answered 12 hours ago

AmitAmit

1,22211428

add a comment | 

You can use text shadow

<button disabled> 🎨_myText </button>

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

share|improve this answer

answered 12 hours ago

AmitAmit

1,22211428

<button disabled> 🎨_myText </button>

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

share|improve this answer

answered 12 hours ago

AmitAmit

1,22211428

answered 12 hours ago

AmitAmit

1,22211428

answered 12 hours ago

AmitAmit

1,22211428