能否通过纯CSS自定义select标签样式实现Drop-up而非Dropdown？

当然可以！仅用CSS就能实现原生<select>的drop-up（向上展开）效果，不需要任何JavaScript。下面我会一步步给你演示具体的实现方式，同时兼顾主流浏览器的兼容性：

核心思路 #

原生<select>的下拉菜单位置受浏览器默认样式控制，但我们可以通过CSS伪元素和定位属性，强制让菜单向上弹出。由于不同浏览器对原生select的样式支持有差异，我们需要针对WebKit（Chrome/Safari）和Firefox分别处理。

完整代码示例 #

HTML（调整了原代码中重复的value值，避免逻辑问题） #

<select class="c_selection">
  <option class="c_placeholder" value="" disabled selected>24h</option>
  <option value="10">10h</option>
  <option value="6">6h</option>
  <option value="3">3h</option>
  <option value="5">5mn</option>
</select>

CSS实现 #

/* 基础样式：重置默认外观，统一尺寸 */
.c_selection {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  height: 42px;
  padding: 0 2.5rem 0 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  font-size: 1rem;
  cursor: pointer;
}

/* 自定义向上箭头，替换默认下拉箭头 */
.c_selection::after {
  content: "↑";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: #666;
  pointer-events: none; /* 避免干扰select的点击事件 */
}

/* WebKit浏览器（Chrome/Safari）：强制下拉菜单向上展开 */
.c_selection::-webkit-select-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin: 0;
  border-radius: 4px;
  border: 1px solid #ddd;
}

/* Firefox浏览器：特殊处理下拉方向 */
@-moz-document url-prefix() {
  .c_selection {
    position: absolute;
    bottom: 0;
    width: 200px; /* 固定宽度，避免布局混乱 */
  }
  .c_selection:focus {
    position: absolute;
    top: 100%;
    bottom: auto;
  }
}

关键细节说明 #

• 重置默认外观：appearance: none可以去掉浏览器自带的下拉箭头和边框样式，让我们能完全自定义select的视觉效果。
• 自定义箭头：用::after伪元素添加向上箭头，明确提示用户这是向上展开的选择框。
• WebKit专属伪元素：::-webkit-select-menu是Chrome和Safari支持的伪元素，直接控制下拉菜单的位置，设置bottom: 100%就能让菜单紧贴select的顶部向上展开。
• Firefox兼容性：Firefox不支持::-webkit-select-menu，所以我们通过切换select的定位（聚焦时从底部移到顶部），间接实现菜单向上展开的效果。

注意事项 #

原生select的样式定制能力有限，如果需要在所有浏览器中实现完全一致的drop-up效果，可能需要用HTML/CSS/JS模拟自定义下拉组件，但上述方案已经能满足大多数场景的需求，且完全基于纯CSS实现。

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