How to add images in select list?

javascript

responsive-design

promises

callbacks

byAlex Kataev·Sep 10, 2024

Your quest for embedding images in dropdown menus takes a successful turn when you adapt a custom dropdown, crafted meticulously with HTML, CSS, and JavaScript. This magic trick needs you to replace the ordinary select element with a structure based on div. Then, say hocus pocus and include img tags along with text in each dropdown item:

<!-- Introducing you to a land where your custom style can reign supreme -->
<div class="custom-select" onclick="toggleDropdown()">
  <div class="selected-option">
    <!-- Here's your default image, change it at your will -->
    <img src="default_image.png" alt="">
    <span>Select an option</span>
  </div>
  <!-- These are the loyal options hidden behind the curtains -->
  <div class="options" style="display:none;">
    <!-- Unleashing them one by one -->
    <div class="option" onclick="selectOption('image1.png', 'Option 1')">
      <!-- Meet the first courageous option -->
      <img src="image1.png" alt="">
      <span>Option 1</span>
    </div>
    <div class="option" onclick="selectOption('image2.png', 'Option 2')">
      <!-- And the second option isn't less daring -->
      <img src="image2.png" alt="">
      <span>Option 2</span>
    </div>
  </div>
</div>

Enter CSS to doll up the dropdown like a native select box, and JavaScript to play the puppeteer – controlling dropdown interactions like unveiling the dropdown and opting for an option. Here, you have a highly customizable alter ego of your original dropdown.

Ace the use of JavaScript libraries

If you crave for cross-browser compatibility and extra functionalities, they are no far-away dreams. Use JavaScript libraries like jQuery UI. The Selectmenu widget it comes with is a unique ball of clay that lets you mould a fully stylable select element according to your whims and fancies. Bonus: you can also slip in images or icons along with option text.

With jQuery UI Selectmenu under your belt, you can muster the force to customize the appearance of both the select field and the list of options. You gain the power to use background images, bulleted icons, or even to swap the dropdown arrow with a custom image or beloved icon from the treasure chest of libraries like Font Awesome.

CSS: the wand to style your options

Wield the power of style attribute to add background images to individual options:

<!-- Here, each option gets the attire of their lifetime -->
<option style="background-image: url('image1.png');">Option 1</option>
<option style="background-image: url('image2.png');">Option 2</option>

Or, conjure up the magic of an external CSS to dress a group together:

/* A gang of options — each getting their unique background image */
option[value="option1"] {
  background-image: url('image1.png'); /* Mr. Option 1 flaunting a swanky background */
}
option[value="option2"] {
  background-image: url('image2.png'); /* And Ms. Option 2 isn't shying away either */
}

When Browsers play spoilsport

Some browsers might not support images in select list options. Don't fret; make emojis or Unicode symbols your allies:

<option>🍔 Burger</option> <!-- Yummy! Who can resist Burger? -->
<option>🍣 Sushi</option> <!-- For a health-conscious choice, take Sushi -->

These are loved and widely supported.

The Radio Button hack

Replicate a select list using a band of radio buttons undercover behind custom labels that are styled with images—designing a parallel user-universe with you having complete control:

<!-- Keep your glasses on; here comes the exquisite transformation -->
<label class="image-option">
  <!-- Radio button keeping a low profile -->
  <input type="radio" name="food" value="burger" />
  <!-- Sporting an enticing image to ensnare users -->
  <img src="burger.png" alt="Burger" />
</label>
<label class="image-option">
  <input type="radio" name="food" value="sushi" />
  <img src="sushi.png" alt="Sushi" />
</label>