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>
17 Replies
Zoë
Zoë5mo ago
You’ll need to make your own drop down
Joao
Joao5mo ago
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
MarkBoots
MarkBoots5mo ago
not really a great idea to use emoji. windows/edge does not support country flags
Joao
Joao5mo ago
How underwhelming of them... circling back to IE days? :grin: 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.
ἔρως
ἔρως5mo ago
yup, sadly this is true. windows 10 doesn't support those at all, on any browser
Joao
Joao5mo ago
Just tried that to see for myself... it's strange because other similar flag emojis work fine.
ἔρως
ἔρως5mo ago
yup, but flags dont and i never got them to work, even with emoji fonts
crazycatpot
crazycatpot5mo ago
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.
ἔρως
ἔρως5mo ago
better yet is both monkey brain clicks the icon it recognizes and you move on
Joao
Joao5mo ago
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 😄 Plus you don't have to go around looking for the spelling of the language in that language.
ἔρως
ἔρως5mo ago
yup, thats sorta what i said i just see the red and green, and imediatelly click it. or i look for usa's flag
Zoë
Zoë5mo ago
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
ἔρως
ἔρως5mo ago
its even worse when people say we are the little country next to spain that speaks spanish...
Zoë
Zoë5mo ago
It's basically Spanish
ἔρως
ἔρως5mo ago
its not there are many differences also, spanish cant understand us but we can understand them if they slow down
Zoë
Zoë5mo ago
It was a joke
ἔρως
ἔρως5mo ago
a very old and tired joke like me