Grey out emoji characters (HTML / CSS)

Question

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>                 

            

标签： html css colors emoji

举报

2条回答

傲

2楼-- · 2020-07-07 03:23

You can use text shadow

<button disabled>                                                                     

                                                        
            

查看更多

0人赞 添加讨论(0) 举报

•  加载中...

淡お忘

3楼-- · 2020-07-07 03:42

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

查看更多

0人赞 添加讨论(0) 举报

•  加载中...

登录 后发表回答

相关问题

• Views base64 encoded blob in HTML with PHP
• Is there a way to play audio on a mobile browser w
• HTML form is not sending $_POST values
• implementing html5 drag and drop photos with knock
• Adding a timeout to a render function in ReactJS

查看全部

相关文章

• 如何在前端实现如下图方式的导出功能？
• 反爬能检测到JS模拟的键盘输入吗
• VUE的v-for中深入响应式原理的问题
• 为什么布局两个方法会不一样？我明明清空了每个插件的间隔距离了
• iframe的里内容看不到，但却点得到
• td中的div垂直居中
• 前端的大佬们，这个div重叠怎么解决啊
• vue的data()中的值能否递归调用

查看全部

收藏的人(4)

• 
• 
• 
• 

Answer 1

You can use text shadow

<button disabled>                                                                     

                                                        
            

查看更多

0人赞 添加讨论(0) 举报

Answer 2

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