Twemoji doesn't render on options dropdown

Question

Twemoji doesn't render on options dropdown

46 Views Asked by ahmedmudkip At 18 April 2025 at 10:42

I am using twemoji to display emojis and I found it working well, but when using the options tag, it renders the default emojis instead of twemoji.

Here's an example code

<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
<body>
  <div style="display:grid; grid-template-columns: 1fr 1fr 1fr;">
    <div>
      <p></p>
      <select>
        <option value="love"></option>
      </select>
    </div>
    <div>
      <p></p>
      <select>
        <option value="cool"></option>
      </select>
    </div>
    <div>
      <p></p>
      <select>
        <option value="sob"></option>
      </select>
    </div>
  </div>
</body>
<script>
  twemoji.parse(document.body);
</script>

The emojis displayed on top are what I expect to see, and below is the unintended result.

How can I make it so that it renders the twemoji emojis instead?

I looked up on Google and StackOverflow to see if this problem happened to anyone else, but wasn't able to find a similar question.

Original Q&A

There are 1 best solutions below

**jjoaovitor7** · Answer 1

The HTML Element option don't supports images, only text, and yes, in a way emojis are text.

For POC (Proof of concept):

twemoji.parse(document.body);
twemoji.parse(document.querySelector("select option[value='love']"));
twemoji.parse(document.querySelector("select option[value='cool']"));
twemoji.parse(document.querySelector("select option[value='sob']"));

<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js"></script>

<body>
  <div style="display:grid; grid-template-columns: 1fr 1fr 1fr;">
    <div>
      <p></p>
      <select>
        <option value="love"></option>
      </select>
    </div>
    <div>
      <p></p>
      <select>
        <option value="cool"></option>
      </select>
    </div>
    <div>
      <p></p>
      <select>
        <option value="sob"></option>
      </select>
    </div>
  </div>
</body>

But you can try without the option, for example with Dropdowns from Bootstrap.

Twemoji doesn't render on options dropdown

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in TWEMOJI

Trending Questions

Popular # Hahtags

Popular Questions