更改下拉箭头的颜色和外观

/* 隐藏默认的下拉箭头 */
select::-ms-expand {
  display: none;
}

/* 自定义下拉箭头 */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("arrow.svg"); /* 使用自定义图像作为下拉箭头 */
  background-position: right 8px center; /* 调整下拉箭头的位置 */
  background-repeat: no-repeat;
  padding-right: 24px; /* 保留足够的空间显示下拉箭头 */
}

/* 更改下拉箭头的颜色 */
select:hover {
  background-image: url("arrow-hover.svg"); /* 使用自定义图像作为下拉箭头 */
}