Creating a Language Selector with Image Display Issue in HTML - Seeking JavaScript or CSS Solution

Hi, I'm working on creating a language selector where users can choose a country. Unfortunately, the images aren't showing up because HTML doesn't support displaying images in selection fields. Is there a way to overcome this using JavaScript or CSS to ensure the images are visible? Thanks in advance!

<select name="" id="">
<option value=""><img src="images/germany.png" alt=""></option>
<option value=""><img src="images/dominican-republic.png" alt=""></option>
<option value=""><img src="images/united-states.png" alt=""></option>
</select>

Zoë•1/7/24, 1:47 PM

You’ll need to make your own drop down

Joao•1/7/24, 5:50 PM

You can use UTF-8 characters for flags:

<select name="" id="">
  <option value="Germany">🇩🇪</option>
  <option value="Dominican Republic">🇩🇴</option>
  <option value="United States Of America">🇺🇸</option>
</select>

<select name="" id="">
  <option value="Germany">🇩🇪</option>
  <option value="Dominican Republic">🇩🇴</option>
  <option value="United States Of America">🇺🇸</option>
</select>

https://apps.timwhitlock.info/emoji/tables/iso3166

JJoao You can use UTF-8 characters for flags: ```html <select name="" id=""> <option...

MarkBoots•1/7/24, 8:04 PM

not really a great idea to use emoji. windows/edge does not support country flags

Joao•1/7/24, 10:53 PM

How underwhelming of them... circling back to IE days? :grin:

Joao•1/7/24, 10:54 PM

But going back to the topic at hand, if emojis are out of the question you'd have to resort to making your own drop-down using some other element as proposed above.

MMarkBoots not really a great idea to use emoji. windows/edge does not support country flag...

Ἔ

ἔρως•1/8/24, 9:02 AM

yup, sadly this is true. windows 10 doesn't support those at all, on any browser

Joao•1/8/24, 10:09 AM

Just tried that to see for myself... it's strange because other similar flag emojis work fine.

Ἔ

ἔρως•1/8/24, 11:45 AM

yup, but flags dont

Ἔ

ἔρως•1/8/24, 11:46 AM

and i never got them to work, even with emoji fonts

crazycatpot•1/10/24, 3:59 AM

I think a drop-down with the language names would be clearer for everyone. Using flags is kind of...meh..., like it's not 100% clear for everyone. Just say Deutsch, Español, English, etc and that makes it clear and simple. Lots of sites do that. A language picker is not a main feature of a website, you use it once and it's good to have, but that's it.

Ἔ

ἔρως•1/10/24, 4:04 AM

better yet is both

Ἔ

ἔρως•1/10/24, 4:05 AM

monkey brain clicks the icon it recognizes and you move on

Joao•1/10/24, 11:33 AM

I mean... I wouldn't pick a language from a country flag I don't recognize. If you speak German, chances are you do recognize the German flag

Joao•1/10/24, 11:35 AM

Plus you don't have to go around looking for the spelling of the language in that language.

Ἔ

ἔρως•1/10/24, 11:55 AM

yup, thats sorta what i said

Ἔ

ἔρως•1/10/24, 11:56 AM

i just see the red and green, and imediatelly click it. or i look for usa's flag

Zoë•1/10/24, 2:46 PM

US flag for English
Mexican flag for Spanish
Brazilian flag for Portuguese
and worst I’ve seen
Canadian flag for French

Flags for languages usually make Europeans sad

Ἔ

ἔρως•1/10/24, 4:47 PM

its even worse when people say we are the little country next to spain that speaks spanish...

Zoë•1/10/24, 4:55 PM

It's basically Spanish

Ἔ

ἔρως•1/10/24, 5:10 PM

its not

Ἔ

ἔρως•1/10/24, 5:11 PM

there are many differences

Ἔ

ἔρως•1/10/24, 5:11 PM

also, spanish cant understand us but we can understand them if they slow down

Zoë•1/10/24, 5:12 PM

It was a joke

Ἔ

ἔρως•1/10/24, 5:29 PM

a very old and tired joke

Ἔ

ἔρως•1/10/24, 5:29 PM

like me

Creating a Language Selector with Image Display Issue in HTML - Seeking JavaScript or CSS Solution

Similar Threads

Similar Threads

Similar Threads