CODEWITHSUNDEEP
javascripthtmlcss
Suhem Bali
Suhem Bali

Reputation: 52

Hack for adding images in 'select' list of html

I want to add the images to my select list using only HTML CSS JS. (no library) I know the browsers don't support the images inside dropdown i.e., the select option of HTML. Is there any way around/a hack to achieve this?

A: How it should look like before the user clicks on the dropdown.
B: How it should look like after the user clicks on the dropdown.

A: It is a select option from HTML with an image

B: Dropdown after user clicks

I tried using,

HTML

<select class="dropdown" name="payment-provider" id="payment-provider" form="payment">
<option value="BitCoin">BTC</option>
<option value="Ethereum">ETH</option>
<option value="Cardano">ADA</option>
<option value="Tether">USDT</option>
</select>

CSS

select#payment-provider option[value="BitCoin"] {
   background: url(/_assets/images/svg/BTC.svg) no-repeat right;
   width: 22px;
   height: 22px;
}

But this code was only supported by the Firefox browser, however even Firefox has now withdraw this support.

Will appriciate the help. Thanks

Upvotes: 0

Views: 7615

Answers (1)

Abin Thaha
Abin Thaha

Reputation: 4633

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>

Upvotes: 2

Related Questions