0

I started from this link How to add images in select list?

and built my own example:

select#language option[value="english"] {
  background-image: url('https://cdn-icons-png.flaticon.com/512/1377/1377975.png');
}

select#language option[value="french"] {
  background-image: url('https://icons.iconarchive.com/icons/wikipedia/flags/256/FR-France-Flag-icon.png');
}
<select id="language">
  <option>english</option>
  <option>french</option>
</select>

But I can't see the images in the options of the select dropdown box.

What am I doing wrong? I would like to have the Flag displayed next to the language label.

P.S. I also have a Codepen of the same above code.

Md. Rakibul Islam
  • 2,140
  • 1
  • 7
  • 14
MMT
  • 81
  • 9
  • Checking that SO link I just realized that it was only possible to do it in Firefox using this method that you are trying but currently it is not possible. I think JS/jQuery is necessary here. Do you want it using only CSS or you would accept a JS/jQuery solution ? – Md. Rakibul Islam Aug 15 '23 at 16:36
  • Thank you very much. Yes, without JS please. – MMT Aug 15 '23 at 20:02
  • Actually, what I wanted to say is I don't think it is possible using CSS and can do it using JS/jQuery. So if you allowed JS/jQuery then I would have written an answer. – Md. Rakibul Islam Aug 15 '23 at 21:27
  • Unfortunately, this isn't possible cross browsers. There are many javascript plugins out there that convert a select to divs with dropdowns and you can customize those using CSS. – imvain2 Aug 15 '23 at 21:36

0 Answers0