如何为HTML select下拉列表标签的部分内容单独设置颜色

原生<select>控件的选中区域由浏览器内置渲染，不支持直接给内部分段文本设置不同颜色，不用引入第三方组件，用「自定义视觉层+透明原生select」的方案就能实现你要的效果，还能完整保留原生下拉的所有交互特性（键盘操作、无障碍适配都正常）。

效果参考：

完整代码 #

HTML #

在原生select外层加容器，新增专门展示双色文本的视觉层：

<div class="custom-select">
  <div class="select-trigger">
    <span class="num"></span>
    <span class="suffix">per page</span>
  </div>
  <select id="pageSizeSelect">
    <option value="50">50</option>
    <option value="100" selected>100</option>
    <option value="150">150</option>
    <option value="200">200</option>
  </select>
</div>

CSS #

把原生select设为全透明铺满容器，点击时依然触发原生下拉，下层视觉层负责展示双色样式：

.custom-select {
  position: relative;
  width: fit-content;
  font-size: 14px;
}
.select-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 28px 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  /* 内置下拉箭头，无需额外图片资源 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  pointer-events: none;
}
/* 数值部分设置为蓝色 */
.num {
  color: #165DFF;
  font-weight: 500;
}
/* per page文本设置为绿色 */
.suffix {
  color: #00B42A;
}
.custom-select select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

JavaScript #

只需要做值同步，初始化和选中变化时把数值更新到视觉层即可：

const select = document.getElementById('pageSizeSelect');
const numSpan = document.querySelector('.num');
// 初始化默认选中值
numSpan.textContent = select.value;
// 监听选择变更，同步更新展示文本
select.addEventListener('change', () => {
  numSpan.textContent = select.value;
});

注意事项 #

• 上述方案的下拉展开项是浏览器原生渲染，仅显示数值，和你给出的示例效果一致。如果需要下拉选项内也展示双色的"xx per page"文本，就需要完全自定义下拉面板，替换原生select的下拉逻辑，工作量会高不少。
• 颜色、边距、边框样式可以根据自己的页面设计随意调整，没有固定约束。

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