自定义Material UI风格Select下拉框箭头切换异常修复咨询

你的问题出在：原生<select>在展开后点击收起时，依然会保持focus状态，所以你用:focus伪类设置的向上箭头不会自动变回向下。下面给你两种可行的解决思路：

方案一：纯CSS结合:focus-within（无需JS） #

通过给<select>套一层容器，利用:focus-within伪类判断容器内元素是否获得焦点，同时处理点击外部失焦的场景，实现箭头切换：

修改后的HTML： #

<div class="SelectWrapper">
  <select class="Select">
    <option value="">Select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
  </select>
</div>

修改后的CSS： #

.SelectWrapper {
  position: relative;
  display: inline-block;
}

.Select {
  font-size: 1.5rem;
  width: 10rem;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 2px solid blue;
  padding-bottom: 2px;
  color: var(--deepGray);
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>')
    no-repeat right;
  -webkit-appearance: none;
}

.Select:hover {
  color: blue;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>')
    no-repeat right;
}

/* 容器内select获得焦点时，切换向上箭头 */
.SelectWrapper:focus-within .Select {
  outline: none;
  box-shadow: none;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>')
    no-repeat right; 
  background-position: right;
}

方案二：JavaScript监听事件（更可靠，兼容所有场景） #

通过监听<select>的点击和失焦事件，手动切换自定义类名控制箭头显示：

修改后的HTML： #

<select class="Select" id="customSelect">
  <option value="">Select</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

修改后的CSS（新增展开状态类）： #

.Select {
  font-size: 1.5rem;
  width: 10rem;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 2px solid blue;
  padding-bottom: 2px;
  color: var(--deepGray);
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>')
    no-repeat right;
  -webkit-appearance: none;
}

.Select:hover {
  color: blue;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>')
    no-repeat right;
}

.Select:focus {
  outline: none;
  box-shadow: none;
}

/* 自定义展开状态样式 */
.Select.is-open {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>')
    no-repeat right; 
  background-position: right;
}

JavaScript代码： #

const selectEl = document.getElementById('customSelect');
let isOpen = false;

selectEl.addEventListener('click', () => {
  isOpen = !isOpen;
  selectEl.classList.toggle('is-open', isOpen);
});

// 点击外部时收起下拉并恢复箭头
document.addEventListener('click', (e) => {
  if (!selectEl.contains(e.target)) {
    isOpen = false;
    selectEl.classList.remove('is-open');
  }
});

收起状态应显示向下箭头：

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