Add flag image to select option

Question

I'm trying to add an image in the option tag in the select, but when I run the code it doesn't show the image.

This is the code:

HTML:

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Custom select box Jquery Plugin by VJ</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">

        <div class="selected-item">
            <p>You Selected Country : <span>Select</span></p>
        </div>

        <select name="" id="cusSelectbox">
            <option value="Select">Select</option>
            <option value="India"><img src="https://static.webshopapp.com/shops/094414/files/054959460/the-united-states-flag-icon-free-download.jpg">India</option>
            <option value="Nepal">Nepal</option>
            
        </select>
    
    

    </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

Your question has already been [answered here](https://stackoverflow.com/questions/2965971/how-to-add-a-images-in-select-list) — brooksrelyt, Dec 12 '18 at 19:20

zer00ne · Accepted Answer · 2022-03-26T23:13:25.067

It's Difficult to Customize `<select>` & `<option>` Tags

<select> and <option> tags are difficult to customize and anything that holds true for one browser is never true for the rest of them.

Solution

Forget about customizing <select>, create a pseudo-<select>^✱ using <details> and <summary>

`<select>` `<details>` & `<summary>`

Forget about customizing <option>, create a pseudo-<option>^✱ using <input type='radio'> and <label>

`<option>` `<input type='radio'>` & `<label>`

^✱The pseudo-<select> and pseudo-<option> tags will be close in appearance and behavior to that of the standard <select> and <option> tags. More importantly, it can store and process a value, and it can be registered to the change event.

Demo

Details are commented in demo

/*| For Demonstration Purposes
This is a test to prove that this pseudo-<select> functions like 
a real <select> by logging the value of the selected pseudo-
<option> to the console.
*/

var xC = document.forms.container;
var xE = xC.elements;
var vR = xE.rad;

xC.onchange = function() {
  console.log(vR.value);
}

html,
body {
  font: 400 small-caps 16px/1.25 Arial;
}

fieldset {
  width: fit-content;
  padding: 0;
}

legend {
  font-size: 1rem
}

details {
  width: 150px;
  cursor: pointer;
  margin: 0 4px -5px 0;
  padding: 0 0 0 10px;
}

summary {
  position: relative;
  width: 96%;
  outline: 0.5px ridge grey;
}


/*
Hides <detail>'s default arrow
*/

details summary {
  list-style: none;
}

details summary::marker {
  display: none;
}


/*| Pseudo-<option>
All pseudo-<option> are initially hidden and 
<label class='opt'> are the only tags that will show/hide, 
the next comment explains how.
*/

.rad {
  display: none
}

.opt {
  display: none;
  margin: 0 0 2px 0;
  cursor: pointer;
  font-size: 0.9rem;
  box-shadow: -2px -2px 11px rgba(0, 0, 0, 0.3) inset;
}


/*| Two Conditions
1. If <details open='true'> all <label class='opt'> are visible.
=============================================
2. if <input class='rad' type='radio' checked> then the 
   <label class='opt'> that proceeds the radio button is visible.
*/

[open] .opt,
.rad:checked+.opt {
  display: block;
}


/*| For Demonstration Purposes
This ruleset changes how the console is displayed.
*/

.as-console-wrapper {
  width: 50%;
  min-height: 100%;
  margin-left: 50%;
  font-variant: normal;
}

.as-console-row.as-console-row::after {
  content: '';
  padding: 0;
  margin: 0;
  border: 0;
  width: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Custom select box Jquery Plugin by VJ</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <!--| Flag Icons
This stylesheet provides the flag icons. 
For details, go to: 
https://afeld.github.io/emoji-css/
-->

  <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet" />
</head>

<body>
  <form id="container">
    <fieldset>
      <legend>Country</legend>

      <!--| Pseudo-<select> 
<details> provides the dropdown behavior and
<summary> contains the pseudo-<option>
-->
      <details>
        <summary>

          <!--| 4 Pseudo-<option> 
Each <label> and <input type='radio'> pair are
synced to each other by matching the values of
<label for="ID"> and <input id="ID">. 
-->

          <!--| Trigger and State
When <label> is clicked ... <input type='radio'>
is checked. This simple "cause and effect" can
be leveraged into a system of states (ie off/on). 
For details, review the CSS. 
-->Origin
        </summary>
        <input id='X' type='radio' class='rad' name='rad' value="" checked>
        <label class='opt' for='X'>
    &nbsp;&nbsp;╍╍╍╍╍╍╍╍╍
  </label>

        <input id='US' type='radio' class='rad' name='rad' value="United States">
        <label class='opt' for='US'>
    &nbsp;&nbsp;
    <i class='em em-us'></i> 
    United States
  </label>

        <input id='GB' type='radio' class='rad' name='rad' value="Great Britain">
        <label class='opt' for='GB'>
    &nbsp;&nbsp;
    <i class='em em-gb'></i> 
    Great Britain
  </label>

        <input id='IN' type='radio' class='rad' name='rad' value="India">
        <label class='opt' for='IN'>
    &nbsp;&nbsp;
    <i class='em em-flag-in'></i>
    India
  </label>

        <input id='NP' type='radio' class='rad' name='rad' value="Nepal">
        <label class='opt' for='NP'>
    &nbsp;&nbsp;
    <i class='em em-flag-np'></i>
    Nepal
  </label>


      </details>
    </fieldset>
  </form>

</body>

</html>

how about if i choose great britain i want great britain to be checked in input radio and not ---------? — rrr, Dec 13 '18 at 20:45
Hi @rrr , are you referring to the `[checked]` attribute on `#X`? That's just there to set what is selected initially so if you prefer `#GB` to be selected once the page is loaded then add the `[checked]` attribute to `#GB` and remove `[checked]` attribute from `#X`. In fact, if you don't need `#X` at all, you can just remove it entirely. — zer00ne, Dec 14 '18 at 00:52
hello. cause i will use it for the language switcher. for example i make the english default selected. but how about the others? if i click the gb when i do refresh i want gb as default selected already and not the english anymore — rrr, Dec 14 '18 at 01:08
@rrr A persistent default goes beyond the scope of this question. I'll be happy to assist you, but you'll need to post another question. Include a reference to [this answer](https://stackoverflow.com/a/53759295/2813224) in the new question. — zer00ne, Dec 14 '18 at 04:26
https://stackoverflow.com/questions/53770322/remove-the-default-checked-value-in-radio-button-and-replace-it-with-the-another/53770512#53770512 — rrr, Dec 15 '18 at 07:37

score 0 · Answer 2 · answered Jul 14 '23 at 04:15

0

Use Emoji flags like . They consist of two Unicode characters composed from the ISO code of the country, e.g. and .

answered Jul 14 '23 at 04:15

Jakub Vrána

614
4
14

Add flag image to select option

2 Answers2

It's Difficult to Customize `<select>` & `<option>` Tags

Solution

`<select>` `<details>` & `<summary>`

`<option>` `<input type='radio'>` & `<label>`

Demo

Linked

Add flag image to select option

2 Answers2

It's Difficult to Customize <select> & <option> Tags

Solution

<select> <details> & <summary>

<option> <input type='radio'> & <label>

Demo

Linked

It's Difficult to Customize `<select>` & `<option>` Tags

`<select>` `<details>` & `<summary>`

`<option>` `<input type='radio'>` & `<label>`