纯CSS实现点击下拉菜单时切换Chevron图标的方案问询

核心思路是利用CSS的:focus-within伪类（检测父容器内元素的焦点状态）来模拟下拉菜单的点击展开行为，借助父容器的伪元素承载Chevron图标（原生<select>不支持伪元素），全程无需JavaScript，也不会修改DOM结构。

调整后的实现代码 #

HTML（复用现有结构，无需修改）

<section id="sec_opt">
  <div class="innerWrap">
    <div class="selectWrap year">
      <div class="custom-select" id="yearWrap">
        <label for="year">Year</label>
        <select id="year">
          <option selected value="0">All</option>
          <option value="1">option1</option>
          <option value="2">option2</option>
          <option value="3">option3</option>
        </select>
      </div>
    </div>
  </div>
</section>

CSS（修改核心逻辑，实现点击切换）

body {
  background: #000;
}

/* 父容器设置相对定位，用于承载图标伪元素 */
#sec_opt .custom-select {
  position: relative;
  width: fit-content;
}

/* 重置select基础样式，移除原有背景图 */
#sec_opt select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  outline: 0;
  font: inherit;
  cursor: pointer;
  color: #ffffff;
  padding: 0 32px 8px 0; /* 右侧预留图标空间 */
  background-color: transparent;
  user-select: none;
}

/* 默认状态下的Chevron图标（父容器伪元素） */
#sec_opt .custom-select::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 8px;
  width: 16px;
  height: 16px;
  background: url("chevron.svg") no-repeat center center;
  background-size: contain;
  transition: 0.2s ease; /* 添加平滑过渡动画 */
}

/* Hover状态切换图标 */
#sec_opt .custom-select:hover::after {
  background-image: url("chevronHover.svg");
}

/* 点击展开（select获得焦点）时切换图标 */
#sec_opt .custom-select:focus-within::after {
  /* 方案1：切换为展开状态图标 */
  background-image: url("chevronExpanded.svg");
  /* 方案2：若使用垂直方向SVG，直接旋转180度（无需额外图片） */
  /* transform: rotate(180deg); */
}

/* 保留原有兼容与样式 */
#sec_opt select::-ms-expand {
  display: none;
}

#sec_opt select option {
  background: #323232;
  color: inherit;
}

#sec_opt select option:hover {
  background: #3e3e3e;
}

关键说明 #

1. :focus-within伪类：当父容器内的<select>获得焦点（即点击展开下拉菜单）时，触发该样式，精准匹配点击状态。
2. 伪元素承载图标：原生<select>不支持伪元素，将图标转移到父容器的::after伪元素中，完全不需要修改原有DOM结构。
3. 两种切换方案：既可以切换不同状态的图标图片，也可以对SVG图标直接旋转，后者更高效且无需额外资源。

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