如何将Bootstrap原生select选择列表设置为透明背景？

结论 #

原生select元素可以直接设置透明背景，你之前写的CSS未生效是因为选择器错误：.countrylist .dropdown-menu匹配的是自定义下拉组件的菜单容器，并不是你示例1里的原生select元素。

可用CSS代码 #

针对你用Bootstrap实现的原生国家选择列表，用以下CSS即可生效：

/* 给select本身设置透明背景 */
select.countrylist {
  background-color: transparent !important;
  /* 可选补充样式，按需调整 */
  border: 1px solid rgba(255,255,255,0.2); /* 半透明边框适配透明背景 */
  color: #fff; /* 调整文字颜色保证可见性 */
  appearance: none; /* 如需隐藏系统默认下拉箭头可加该属性 */
}

/* 如需展开后的option选项也设置透明 */
select.countrylist option {
  background-color: rgba(0,0,0,0.6); /* 可直接写transparent做全透明 */
  color: #fff;
}

注意事项 #

• 不同浏览器对原生select的option样式支持存在差异，部分低版本浏览器可能无法实现option的透明效果，如果你需要全平台样式完全一致，再考虑使用示例2的自定义下拉组件实现
• Bootstrap自带的form-control类默认有白色背景样式，因此需要保证你写的CSS优先级高于Bootstrap默认样式，或者增加!important强制覆盖

内容的提问来源于stack exchange，提问作者Isak La Fleur