How to add span to select option element to show a flag in each option?

Question

I am working on a select which helps users to select the language easily. I stuck on a problem with https://github.com/lipis/flag-icon-css to add a flag to each option. Please help.

I added the css and tested in a simple element without inside a select and it show up but inside option it wont work I tried data-content aswell not worked.

<select class="form-control">
   <option value="HU_hu" data-content='<span class="flag-icon flag-icon-hu"></span>'></option>
   <option value="EN_en" data-content='<span class="flag-icon flag-icon-hu"></span>'></option>
   <option value="DE_de" data-content='<span class="flag-icon flag-icon-hu"></span>'></option>
   <option value="RU_ru" data-content='<span class="flag-icon flag-icon-hu"></span>'></option>
</select>

You cannot include elements inside the ` – Anurag Srivastava May 23 '19 at 16:50 — Anurag Srivastava, May 23 '19 at 16:50

score 0 · Answer 1 · answered May 23 '19 at 16:55

It depends on the browsers you want to support and how badly you want these flags. In my experience it's easier to build a 'select like'-form yourself using divs then it is to get images, or any styling for that matter, on a select-element. But if you insist on using the select element you can take a look at this question.

How to add span to select option element to show a flag in each option?

1 Answers1