iOS Chrome中Select2自定义下拉框被原生控件覆盖，如何移除原生下拉框？

针对iOS Chrome里原生select遮挡自定义Select2下拉框的问题，可通过以下方法彻底隐藏原生select元素，同时不影响Select2正常功能：

• 强制覆盖Select2默认的隐藏类样式，确保原生select在视觉上完全不可见且层级最低：

.select2-hidden-accessible {
  position: absolute !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  z-index: -9999 !important;
}

该类是Select2自动添加到原生select上的，通过!important强制提升样式优先级，避免iOS Chrome强制渲染原生下拉框。

• 若上述方法仍无效，可额外给原生select添加样式，禁用iOS原生控件外观：

select {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: absolute !important;
  opacity: 0 !important;
  z-index: -1 !important;
}

注意不要使用display: none或visibility: hidden，这会导致Select2无法读取原生select的选项数据，进而功能失效。

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