如何实现选中select输入框时切换箭头方向？

我正在开发一个select输入框组件，需求是点击select时箭头向上，点击组件外部时箭头恢复向下（当前默认状态为向下）。我已添加自定义箭头，但无法实现箭头方向的切换效果，现有代码如下：

CSS代码 #

.wrap {
  position: absolute;
  right: 0;
  top: 40%;
  width: 350px;
  left: 0;
  margin: 0 auto;
}

/* select starting stylings ------------------------------*/
.select {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  position: relative;
  width: 350px;
}

.select-text {
  position: relative;
  font-family: inherit;
  background-color: transparent;
  width: 350px;
  padding: 10px 10px 10px 0;
  font-size: 18px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);

  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat, repeat;
  background-position: right 0.7em top 50%, 0 0;
  background-size: 0.65em auto, 100%;
}

/* Remove focus */
.select-text:focus {
  outline: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0);
}

/* Use custom arrow */
.select .select-text {
  appearance: none;
  -webkit-appearance: none;
}

.select:after {
  position: absolute;
  top: 18px;
  right: 10px;
  width: 0;
  height: 0;
  padding: 0;
  content: "";
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(0, 0, 0, 0.12);
  pointer-events: none;
}

/* LABEL ======================================= */
.select-label {
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 0;
  top: 10px;
  transition: 0.2s ease all;
}

/* active state */
.select-text:focus ~ .select-label,
.select-text:valid ~ .select-label {
  top: -20px;
  transition: 0.2s ease all;
  font-size: 14px;
}

React组件代码 #

import "./styles.css";

export default function App() {
  return (
    <div
      style={{
        padding: "50px"
      }}
    >
      <div class="select">
        <select class="select-text" required>
          <option value="" disabled selected></option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </select>
        <label class="select-label">Select</label>
      </div>
    </div>
  );
}

要实现箭头方向切换，需要结合CSS类切换和JavaScript事件监听完成，具体步骤如下：

1. 调整CSS样式，添加箭头向上的状态类 #

修改.select:after的默认样式，添加过渡动画，并新增open类定义箭头向上的状态：

.select:after {
  position: absolute;
  top: 18px;
  right: 10px;
  width: 0;
  height: 0;
  padding: 0;
  content: "";
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(0, 0, 0, 0.12);
  pointer-events: none;
  /* 添加上下切换的过渡动画 */
  transition: transform 0.2s ease, top 0.2s ease;
}

/* 箭头向上的状态 */
.select.open:after {
  transform: rotate(180deg);
  top: 14px; /* 微调位置保持垂直居中 */
}

2. 在React组件中添加事件逻辑 #

通过状态管理控制open类的添加/移除，同时监听文档点击事件处理外部点击关闭：

import "./styles.css";
import { useEffect, useRef, useState } from "react";

export default function App() {
  const selectRef = useRef(null);
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    // 点击组件外部时关闭下拉框，恢复箭头方向
    const handleClickOutside = (e) => {
      if (selectRef.current && !selectRef.current.contains(e.target)) {
        setIsOpen(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

  return (
    <div style={{ padding: "50px" }}>
      {/* 根据状态切换open类 */}
      <div className={`select ${isOpen ? "open" : ""}`} ref={selectRef}>
        <select
          className="select-text"
          required
          onClick={() => setIsOpen(!isOpen)}
          {/* 选择选项后自动关闭 */}
          onChange={() => setIsOpen(false)}
        >
          <option value="" disabled selected></option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </select>
        <label className="select-label">Select</label>
      </div>
    </div>
  );
}

额外优化说明 #

• 过渡动画让箭头切换更平滑自然；
• 处理了选择选项后自动关闭下拉框的逻辑；
• 使用useRef精准判断点击区域，避免误触发关闭操作。

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