如何用CSS隐藏select元素的完整下拉菜单？

要在使用原生<select>元素的前提下，隐藏下拉菜单显示、同时保留Tab聚焦和上下箭头切换选项的功能，纯CSS可以这样实现：

核心思路 #

通过CSS隐藏下拉面板的可视区域，但不移除<option>元素（保障键盘导航和可访问性），同时去掉原生下拉箭头避免触发下拉。

完整代码示例 #

/* 重置select样式，去掉原生下拉箭头 */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 20px;
  padding: 10px 30px 10px 10px; /* 右侧留空间放自定义箭头 */
  cursor: pointer;
  height: 50px;
  max-height: 50px;
  position: relative;
  overflow: hidden;
}

/* WebKit内核浏览器（Chrome/Safari）：将下拉列表容器移出可视区域 */
select::-webkit-list-box {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

/* Firefox浏览器：隐藏option的可视高度，但保留其可导航性 */
@-moz-document url-prefix() {
  select option {
    height: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
  }
}

/* 自定义下拉箭头（可选，替代原生箭头） */
select::after {
  content: '▼';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* 避免干扰select的点击事件 */
}

<select>
  <option value="1">Value 1</option>
  <option value="2">Value 2</option>
  <option value="3">Value 3</option>
  <option value="4">Value 4</option>
  <option value="5">Value 5</option>
</select>

说明 #

1. 键盘导航保留：Tab键可正常聚焦<select>，上下箭头能切换选项，完全符合原生表单的交互逻辑。
2. 可访问性保障：<select>和<option>的DOM结构完整，屏幕阅读器仍能正确识别表单控件和选项内容。
3. 表单兼容性：原生select的表单提交、数据绑定等功能不受影响，无需额外JS处理。
4. 跨浏览器适配：针对WebKit和Firefox分别做了兼容处理，覆盖主流浏览器。

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