How to Add Images in Select List

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.

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>

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

How to add images in select list?

Hack for adding images in 'select' list of html

Putting images with options in a dropdown list

Related Topics

Leave a reply