纯CSS选择菜单/下拉菜单:如何制作右箭头功能？

.select-menu {
  position: relative;
  display: inline-block;
}

.select-menu::after {
  content: '▼';
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.select-menu {
  background-image: url('path/to/arrow-right.png');
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

<svg class="arrow-right" viewBox="0 0 10 16" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 8L10 16L10 0Z" />
</svg>

.select-menu {
  position: relative;
  display: inline-block;
}

.arrow-right {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 10px;
  height: 16px;
  transform: translateY(-50%);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />

<i class="fas fa-caret-right"></i>

.select-menu {
  position: relative;
  display: inline-block;
}

.fa-caret-right {
  position: absolute;
  top: 50%;
  right: 10px;
  font-size: 16px;
  transform: translateY(-50%);
}