Image in Select Element

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>

Image in SELECT element

Doing this in a cross-browser way is going to be very challenging, and I suspect, impossible.

Instead, you might want to try using a widget that looks and acts like a select box, but is made w/ HTML & Javascript.

Here's one way to do it with jQuery:

jquery.combobox

How to change background-image on select element

I am not sure this is possible with css alone.
You could add a simple snippet of Javascript. In this case I would probably use data-attributes.

I set up an example with data-flag and targeting it this way in your css.

const from = document.querySelector('#from');

from.addEventListener('change', function() {
    this.dataset.flag = this.value;
});

#from[data-flag="gbp"]{
  background: red;
}

#from[data-flag="eur"]{
  background: blue;
}

<select id="from" class="recalculate flag-show" data-flag="gbp">
      <option value="gbp" selected="">GBP - Pound Sterling</option>
      <option value="eur">EUR - EURO</option>
  </select>

How to change image in a div with select tag?

You can bind change event handler to the select tag and change src according to the change.

const img = document.querySelector('#img-change');

const select = document.querySelector('#country');

select.addEventListener('change', function() {

  img.src = `https://flagpedia.net/data/flags/h80/${this.selectedOptions[0].dataset.countrycode.toLowerCase()}.webp`

})

<select id="country">

  <option data-countryCode="IN" value="91">India</option>

  <option data-countryCode="US" value="1">US</option>

  <option data-countryCode="GB" value="44">UK</option>

</select>

<div class="image">

  <img src="https://flagpedia.net/data/flags/h80/in.webp" id="img-change">

</div>

---

Related Topics