如何用CSS隐藏<select>下拉菜单自动生成的圆角边框/气泡？

方案1：清除原生焦点与下拉UI样式 #

#product-select {
  /* 移除所有浏览器默认的焦点轮廓 */
  outline: none;
  /* 禁用原生下拉箭头（如果你已经自定义了箭头，这步可选） */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* 覆盖浏览器默认的焦点阴影/边框 */
  box-shadow: none;
  /* 可选：把边框设为透明或和背景一致 */
  border: none;
}

/* 强制覆盖焦点伪类的样式 */
#product-select:focus {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}

方案2：让不响应点击事件（需配合自定义元素） # 如果方案1仍有残留的原生UI，可让完全失去交互能力，把点击事件交给你的自定义元素：

#product-select {
  pointer-events: none;
}

/* 给你的自定义下拉元素恢复交互能力 */
.your-custom-select-container {
  pointer-events: auto;
}

极限情况：改用非标签 # 如果以上方案在部分浏览器（尤其是移动端小众浏览器）仍无法彻底消除原生UI，那确实需要放弃标签，用div、ul、li等普通元素模拟下拉功能——因为原生的部分控件样式是浏览器私有实现，CSS无法完全覆盖。 内容的提问来源于stack exchange，提问作者bkseen