如何为HTML Select下拉菜单的Option内文本设置不同字号？

原生<select>的<option>元素不支持内嵌HTML标签，你用<span>设置字号的方法行不通，浏览器会直接把标签当成文本渲染。下面给两种可行方案：

方案一：自定义下拉组件（推荐，样式完全可控） #

用HTML、CSS和JS模拟下拉菜单，能自由控制每个文本部分的样式：

HTML结构 #

<div class="custom-select">
  <div class="selected-option">Gold <span style="font-size:10px">(1gram - 0.243usb)</span></div>
  <div class="options-list">
    <div class="option-item" data-value="au">Gold <span style="font-size:10px">(1gram - 0.243usb)</span></div>
    <div class="option-item" data-value="ag">Silver <span style="font-size:10px">(1gram - 0.200usb)</span></div>
  </div>
</div>
<!-- 可选：加隐藏input存选中值，方便表单提交 -->
<input type="hidden" name="metal-type" id="hiddenMetalValue">

CSS样式 #

.custom-select {
  position: relative;
  width: fit-content;
  font-family: inherit;
}

.selected-option {
  padding: 0.5rem 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  font-size: 1.25rem;
  cursor: pointer;
  background-color: #fff;
}

.options-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ced4da;
  border-top: none;
  border-radius: 0 0 0.375rem 0.375rem;
  display: none;
  background-color: #fff;
  z-index: 100;
}

.options-list.show {
  display: block;
}

.option-item {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

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

JS交互逻辑 #

const customSelect = document.querySelector('.custom-select');
const selectedOption = customSelect.querySelector('.selected-option');
const optionsList = customSelect.querySelector('.options-list');
const optionItems = customSelect.querySelectorAll('.option-item');
const hiddenInput = document.getElementById('hiddenMetalValue');

// 切换下拉列表显示/隐藏
selectedOption.addEventListener('click', () => {
  optionsList.classList.toggle('show');
});

// 选择选项后的处理
optionItems.forEach(item => {
  item.addEventListener('click', () => {
    selectedOption.innerHTML = item.innerHTML;
    hiddenInput.value = item.dataset.value; // 更新隐藏input的值
    optionsList.classList.remove('show');
  });
});

// 点击页面其他区域关闭下拉列表
document.addEventListener('click', (e) => {
  if (!customSelect.contains(e.target)) {
    optionsList.classList.remove('show');
  }
});

方案二：使用Unicode小号字符（快速但局限性大） #

如果不想写复杂的自定义组件，可以用Unicode提供的小号拉丁字符，这类字符本身字号偏小，直接写入<option>即可：

<select name="metal-type" class="form-select form-select-lg" aria-label="Default select example" id="metalSelector">
   <option value="au" selected>Gold (¹ᵍʳᵃᵐ ⁻ ⁰·²⁴³ᵘˢᵇ)</option>
   <option value="ag">Silver (¹ᵍʳᵃᵐ ⁻ ⁰·²⁰⁰ᵘˢᵇ)</option>
</select>

注意：这种方法的显示效果受浏览器和字体影响，且不是所有字符都有对应小号版本，适合简单场景。

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