0

I am currently creating a drop down list that on click, it navigates to a different country's version of the website.

I want to add a flag to the left of the country name, but the inline styling won't work with a link. 

<form id="country-select">
              <select onchange="window.open(this.options[this.selectedIndex].value)">
                <option style="background-image:url('www.imagelink.png');" value="">USA</option>
                <option style="background-image:url('www.imagelink.png');" value="shop link">CANADA</option>
                <option style="background-image:url('www.imagelink.png');" value="shop link">JAPAN</option>
                <option style="background-image:url('www.imagelink.png');" value="shop link">ITALY</option>
                <option style="background-image:url('www.imagelink.png');" value="shop link">FRANCE</option>
                <option style="background-image:url('www.imagelink.png');" value="shop link">SPAIN</option>
                <option style="background-image:url('www.imagelink.png');" value="shop link">GERMANY</option>
                <option style="background-image:url('www.imagelink.png');" value="shop link">CHINA</option>
                <option style="background-image:url('www.imagelink.png');" value="shop link">WORLD</option>
              </select>
            </form>

This code works perfectly on a PC, but doesn't work on mobile.

Does anybody have any suggestions?

Thank you

iiiinana
  • 11
  • 1
  • 5
  • 1
    check it https://stackoverflow.com/a/33123117/4659987 – Cenk YAGMUR Jan 15 '18 at 07:23
  • @CenkYAGMUR Sorry, I would like them to appear always, not after clicking the dropdown arrow - thank you though! – iiiinana Jan 15 '18 at 08:12
  • i don't understand what do you want but maybe you can check it https://github.com/blazeworx/flagstrap – Cenk YAGMUR Jan 15 '18 at 08:26
  • @CenkYAGMUR The drop down menus you gave me do not display a map at all times, only when opening the drop down menu it appears beside all countries. I want the map to show on the current selection and when selecting a country... Also my onclick navigation breaks – iiiinana Jan 16 '18 at 00:21

1 Answers1

0

You need to create custom dropdown. Either you can use select2 or chosen js libraray for the same. Go through their documentation how you can add flag(s).

Shyam
  • 782
  • 5
  • 12
  • I am updating a shopify layout, so I'm not sure (and also not very confident) to add this to a liquid layout - do you have any advice? – iiiinana Jan 15 '18 at 08:14