Блог

Главная - Вопросы по программированию - Хак для добавления изображений в список «выбрать» html

Хак для добавления изображений в список «выбрать» html

#javascript #html #css

Вопрос:

Я хочу добавить изображения в свой список выбора, используя только HTML CSS JS. (нет библиотеки) Я знаю, что браузеры не поддерживают изображения внутри выпадающего списка, т. Е. опцию выбора HTML. Есть ли какой-либо способ обойти/взломать, чтобы достичь этого?

Ответ: Как это должно выглядеть до того, как пользователь нажмет на раскрывающийся список.
B: Как это должно выглядеть после того, как пользователь нажмет на раскрывающийся список.

A: Это опция выбора из HTML с изображением

B: Выпадающий список после нажатия пользователем

Я пытался использовать,

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;
}

Но этот код поддерживался только браузером Firefox, однако даже Firefox теперь отказался от этой поддержки.

Будет оценена помощь. Спасибо

Комментарии:

1. Это возможно с помощью пользовательского выбора, который мы можем создать, используя ul>li

2. Это легко достижимо с помощью jQuery вместо чистого JS

3. jQuery написан на чистом JS.. так что, в свою очередь, вы можете сделать это без jQuery, если вам нужно. Вы можете создать любой пользовательский интерфейс, который вам нравится, и заполнить значения скрытого выбора.

4. Ваш пример css выглядит неверно. Вы хотите background-size , чтобы размер был 22 пикселя, а не весь option .

5. @JavaScript , который я пробовал использовать background-size: 22px , все еще не везет.

Ответ №1:

Проверьте фрагмент ниже. Я создал пользовательский компонент, используя 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>
Метки: