Putting Images With Options in a Dropdown List

Putting images with options in a dropdown list

This code will work only in Firefox:

<select>
    <option value="volvo" style="background-image:url(images/volvo.png);">Volvo</option>
    <option value="saab"  style="background-image:url(images/saab.png);">Saab</option>
    <option value="honda" style="background-image:url(images/honda.png);">Honda</option>
    <option value="audi"  style="background-image:url(images/audi.png);">Audi</option>
</select>

Edit (April 2018):

Firefox does not support this anymore.

How to add images in select list?

In Firefox you can just add background image to option:

<select>
  <option style="background-image:url(male.png);">male</option>
  <option style="background-image:url(female.png);">female</option>
  <option style="background-image:url(others.png);">others</option>
</select> 

Better yet, you can separate HTML and CSS like that

HTML

<select id="gender">
  <option>male</option>
  <option>female</option>
  <option>others</option>
</select>  

CSS

select#gender option[value="male"]   { background-image:url(male.png);   }
select#gender option[value="female"] { background-image:url(female.png); }
select#gender option[value="others"] { background-image:url(others.png); }

In other browsers the only way of doing that would be using some JS widget library, like for example jQuery UI, e.g. using Selectable.

From jQuery UI 1.11, Selectmenu widget is available, which is very close to what you want.

want to show image/icons in dropdown list

html:

<select name="event_icon" id="event_icon">
                                   <option>Select An Icon</option>
                                   <option value="vaisakhi.jpg" data-style="background-image: url('icons/vaisakhi.jpg');"></option>
                                   <option  value="cake.png"  data-style="background-image: url('icons/cake.png');"></option>
                                   <option value="game.png" data-style="background-image: url('icons/game.png');"></option>
                               </select>

script:

<script>
  $(function () {
       $.widget("custom.iconselectmenu", $.ui.selectmenu, {
           _renderItem: function (ul, item) {
               var li = $("<li>"),
                       wrapper = $("<div>", {text: item.label});

               if (item.disabled) {
                   li.addClass("ui-state-disabled");
               }

               $("<span>", {
                   style: item.element.attr("data-style"),
                   "class": "ui-icon " + item.element.attr("data-class")
               })
                       .appendTo(wrapper);

               return li.append(wrapper).appendTo(ul);
           }
       });


       $("#event_icon")
               .iconselectmenu()
               .iconselectmenu("menuWidget")
               .addClass("ui-menu-icons avatar");
   });
</script>

Dropdown select with images

Check this example .. everything has been done easily http://jsfiddle.net/GHzfD/

EDIT: Updated/working as of 2013, July 02: jsfiddle.net/GHzfD/357

#webmenu{
    width:340px;
}

<select name="webmenu" id="webmenu">
    <option value="calendar" title="http://www.abe.co.nz/edit/image_cache/Hamach_300x60c0.JPG"></option>
    <option value="shopping_cart" title="http://www.nationaldirectory.com.au/sites/itchnomore/thumbs/screenshot2013-01-23at12.05.50pm_300_60.png"></option>
    <option value="cd" title="http://www.mitenterpriseforum.co.uk/wp-content/uploads/2013/01/MIT_EF_logo_300x60.jpg"></option>
    <option value="email"  selected="selected" title="http://annualreport.tacomaartmuseum.org/sites/default/files/L_AnnualReport_300x60.png"></option>
    <option value="faq" title="http://fleetfootmarketing.com/wp-content/uploads/2013/01/Wichita-Apartment-Video-Tours-CTA60-300x50.png"></option>
    <option value="games" title="http://krishnapatrika.com/images/300x50/pellipandiri300-50.gif"></option>
</select>

$("body select").msDropDown();

Hack for adding images in 'select' list of html

Check the snippet below. I created a custom component using UL>LI.

var placeholder = document.getElementById('placeholder');
var dropdown = document.getElementById('custom-select');

placeholder.addEventListener('click', function() {
    if(dropdown.classList.contains('active')) {
        dropdown.classList.remove('active')
    } else {
        dropdown.classList.add('active')
    }
})

.custom-select .dropdown {
  list-style: none;
  padding: 0;
  display: none;
}

.dropdown .img-wrapper,
.placeholder .img-wrapper {
  display: inline-block;
  max-width: 30px;
}

.dropdown img,
.placeholder img {
  max-width: 100%;
}

.placeholder {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  position: relative;
}

.placeholder::before,
.placeholder::after {
  content: "";
  display: inline-block;
  height: 2px;
  width: 10px;
  background-color: #aaa;
  position: absolute;
  right: 0;
}

.placeholder::before {
  transform: rotate(45deg);
  right: 20px;
}

.placeholder::after {
  transform: rotate(-45deg);
  right: 15px;
}

.custom-select.active .placeholder::after {
  right: 20px;
}

.custom-select.active .placeholder::before {
  right: 15px;
}

.custom-select.active .dropdown {
  display: flex;
  flex-direction: column;
  box-shadow: 1px 1px 6px 1px #ddd;
  position: absolute;
  top: 40px;
  right: 0;
  left: 0;
  min-width: 200px;
}

.dropdown li {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 10px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.dropdown li:not(:last-child) {
  border-bottom: 1px solid #aaa;
}

.dropdown li:hover {
  box-shadow: 0px 0px 11px 1px rgba(182, 182, 182, 0.75) inset;
}

.custom-select {
  display: inline-flex;
  flex-direction: column;
  position: relative;
  width: 100px;
}
input {
  border: 0;
  outline: none;
  box-shadow: none;
  width: 40px;
  display: inline-block;
  height: 30px;
  text-align: right;
}

.wrapper {
  display: inline-flex;
  position: relative;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-top: 50px;
  align-items: center;
}

.input-label {
  position: absolute;
  background-color: #fff;
  top: -6px;
  display: inline-block;
  left: 10px;
  padding: 0 5px;
  color: #aaa;
}

<section class="wrapper">
  <label for="" class="input-label">You Receive</label>
  <input type="number" readonly value=".32" />
  <div class="custom-select" id="custom-select">
    <span id="placeholder" class="placeholder">
      <span class="img-wrapper">
        <img src="https://pngimg.com/uploads/bitcoin/bitcoin_PNG48.png" />
      </span>
      <span class="text"> BTC</span>
    </span>
    <ul class="dropdown" id="dropdown">
      <li class="dd-item">
        <span class="img-wrapper">
          <img src="https://pngimg.com/uploads/bitcoin/bitcoin_PNG48.png" />
        </span>
        <span class="text">Bitcoin (BTC)</span>
      </li>
      <li class="dd-item">
        <span class="img-wrapper">
          <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" />
        </span>
        <span class="text">Ethereum (ETH)</span>
      </li>
      <li class="dd-item">
        <span class="img-wrapper">
          <img src="https://cryptologos.cc/logos/cardano-ada-logo.png" />
        </span>
        <span class="text">Cardano (ADA)</span>
      </li>
    </ul>
  </div>
</section>