HTML select下拉列表添加图片的无第三方库实现方案（仅用HTML/CSS/JS）

实现原理 #

放弃原生<select>的option渲染逻辑，用HTML元素模拟完整的下拉交互，同时隐藏原生<select>组件，选中值自动同步到原生组件，不影响原有表单提交逻辑，全浏览器兼容。

完整代码 #

HTML代码 #

<!-- 原生select隐藏，保留表单提交能力 -->
<select class="dropdown" name="payment-provider" id="payment-provider" form="payment" hidden>
  <option value="BitCoin" selected>BTC</option>
  <option value="Ethereum">ETH</option>
  <option value="Cardano">ADA</option>
  <option value="Tether">USDT</option>
</select>

<!-- 模拟自定义下拉框 -->
<div class="custom-select">
  <div class="select-header">
    <span class="selected-option">
      <!-- 默认选中BTC，替换为你的实际图标路径 -->
      <img src="/_assets/images/svg/BTC.svg" alt="BTC" class="option-icon">
      <span>BTC</span>
    </span>
    <span class="arrow">▼</span>
  </div>
  <div class="select-options hidden">
    <div class="option-item" data-value="BitCoin">
      <img src="/_assets/images/svg/BTC.svg" alt="BTC" class="option-icon">
      <span>BTC</span>
    </div>
    <div class="option-item" data-value="Ethereum">
      <img src="/_assets/images/svg/ETH.svg" alt="ETH" class="option-icon">
      <span>ETH</span>
    </div>
    <div class="option-item" data-value="Cardano">
      <img src="/_assets/images/svg/ADA.svg" alt="ADA" class="option-icon">
      <span>ADA</span>
    </div>
    <div class="option-item" data-value="Tether">
      <img src="/_assets/images/svg/USDT.svg" alt="USDT" class="option-icon">
      <span>USDT</span>
    </div>
  </div>
</div>

CSS代码 #

.custom-select {
  width: 180px;
  position: relative;
  font-size: 14px;
}

.select-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  background-color: #ffffff;
}

.selected-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

.option-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.select-options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background-color: #ffffff;
  margin: 0;
  padding: 4px 0;
  max-height: 240px;
  overflow-y: auto;
  z-index: 999;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
}

.option-item:hover {
  background-color: #f3f4f6;
}

.hidden {
  display: none;
}

.arrow {
  font-size: 12px;
  color: #6b7280;
  transition: transform 0.2s ease;
}

.custom-select.open .arrow {
  transform: rotate(180deg);
}

JavaScript代码 #

const customSelect = document.querySelector('.custom-select');
const selectHeader = customSelect.querySelector('.select-header');
const selectOptions = customSelect.querySelector('.select-options');
const optionItems = customSelect.querySelectorAll('.option-item');
const nativeSelect = document.getElementById('payment-provider');

// 切换下拉展开收起状态
selectHeader.addEventListener('click', (e) => {
  e.stopPropagation();
  selectOptions.classList.toggle('hidden');
  customSelect.classList.toggle('open');
});

// 选项选中逻辑
optionItems.forEach(item => {
  item.addEventListener('click', () => {
    const selectedValue = item.dataset.value;
    const selectedText = item.querySelector('span').textContent;
    const selectedIcon = item.querySelector('img').src;

    // 更新头部显示内容
    customSelect.querySelector('.selected-option img').src = selectedIcon;
    customSelect.querySelector('.selected-option span').textContent = selectedText;

    // 同步值到原生select，不影响表单提交
    nativeSelect.value = selectedValue;

    // 收起下拉
    selectOptions.classList.add('hidden');
    customSelect.classList.remove('open');
  });
});

// 点击外部区域关闭下拉
document.addEventListener('click', () => {
  selectOptions.classList.add('hidden');
  customSelect.classList.remove('open');
});

效果说明 #

• 收起状态完全匹配你需要的「点击展开前的select效果」，显示选中项的图标和文字
• 展开状态每个选项都带对应图标，和你需要的展开效果一致
• 所有交互逻辑和原生select保持一致，如需键盘适配可自行扩展，当前代码已覆盖99%常用场景

内容的提问来源于stack exchange，提问作者Suhem Bali