如何重现该筛选下拉菜单？优先无需Java实现

嘿，我太懂你这种对着线框图卡壳的憋屈感了——原生<select>的<option>样式简直是被浏览器锁死的，不用jQuery这类工具根本没法改得和设计图一致。别慌，咱们可以用纯CSS+HTML搞一个完全可控的筛选菜单，全程不用JS，简单又实用，完全能满足你的需求！

核心思路 #

既然原生<select>的样式限制死了，咱们换个思路：用隐藏的复选框来控制下拉面板的展开/收起，用普通HTML元素（比如<div>、<label>）做可自定义样式的选项，这样就能完全复刻线框图的外观，功能也和原生下拉一致。

完整代码示例 #

直接套用下面的代码，然后根据你的线框图调整颜色、尺寸、间距就行：

<!-- 自定义下拉容器 -->
<div class="custom-select">
  <!-- 触发按钮 + 隐藏的复选框（控制展开/收起） -->
  <label for="filter-trigger" class="select-trigger">
    选择筛选条件
    <span class="arrow">▼</span>
  </label>
  <input type="checkbox" id="filter-trigger" class="hidden-checkbox">

  <!-- 下拉选项面板 -->
  <div class="select-options">
    <label class="option-item">
      <input type="radio" name="filter" value="latest">
      最新发布
    </label>
    <label class="option-item">
      <input type="radio" name="filter" value="price-low">
      价格从低到高
    </label>
    <label class="option-item">
      <input type="radio" name="filter" value="sales-high">
      销量最高
    </label>
  </div>
</div>

对应的CSS样式：

/* 基础容器 */
.custom-select {
  position: relative;
  width: 220px; /* 按需调整宽度 */
  font-family: sans-serif;
}

/* 触发按钮样式 */
.select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}

.select-trigger:hover {
  border-color: #999;
}

/* 下拉箭头 */
.arrow {
  font-size: 12px;
  transition: transform 0.2s;
}

/* 隐藏原生复选框 */
.hidden-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 复选框选中时：箭头旋转 + 显示下拉面板 */
.hidden-checkbox:checked ~ .select-options {
  display: block;
}
.hidden-checkbox:checked + .select-trigger .arrow {
  transform: rotate(180deg);
}

/* 下拉面板默认隐藏 */
.select-options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: none;
  z-index: 10;
}

/* 选项样式 */
.option-item {
  display: block;
  padding: 10px 14px;
  cursor: pointer;
}

.option-item:hover {
  background-color: #f5f5f5;
}

.option-item input[type="radio"] {
  margin-right: 8px;
}

这个方案的优势 #

• 完全无JS依赖：用CSS的:checked伪类控制显示/隐藏，纯前端驱动，不用折腾脚本。
• 样式100%可控：所有元素都是普通HTML标签，你可以随便改颜色、边框、hover效果，完美匹配你的线框图。
• 功能和原生一致：单选框保证只能选一个选项，点击触发按钮或选项都能正常切换/收起。

可选：加几行JS优化体验（非必需） #

如果需要点击下拉面板外部自动收起的功能，加几行极简JS就行，不用jQuery：

document.addEventListener('click', function(e) {
  const selectBox = document.querySelector('.custom-select');
  if (!selectBox.contains(e.target)) {
    document.getElementById('filter-trigger').checked = false;
  }
});

这个小脚本会在点击容器外时自动关闭下拉面板，体验更接近原生select。

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