如何使下拉选项与select元素具有相同的样式？

<select class="custom-select">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

.custom-select {
  appearance: none; /* 隐藏默认的下拉箭头 */
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url(arrow.png) no-repeat right center; /* 使用自定义的箭头图标 */
  padding-right: 20px; /* 留出箭头的位置 */
}

.custom-select::after {
  content: ""; /* 创建一个伪元素 */
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: url(arrow.png) no-repeat center; /* 使用与select元素相同的箭头图标 */
}