如何在微调器中为下拉箭头和下划线设置不同的颜色？

.select-arrow {
  position: relative;
}

.select-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px; /* 根据实际情况调整箭头位置 */
  transform: translateY(-50%);
  border: solid #000; /* 设置箭头颜色 */
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  pointer-events: none;
}

/* 如果需要修改箭头的方向，可以调整transform属性的值 */
.select-arrow::after {
  transform: translateY(-50%) rotate(45deg);
}

.underline {
  border-bottom: 1px solid #000; /* 设置下划线颜色 */
}

import React from 'react';
import './styles.css'; // 引入上述CSS样式文件

class CustomSelect extends React.Component {
  render() {
    return (
      <div className="select-container">
        <select className="select-arrow">
          {/* 下拉选项 */}
        </select>
        <div className="underline"></div>
      </div>
    );
  }
}