如何在SASS中为下拉选择器的图标添加右外边距？

我想给下拉选择器的图标加右外边距，但不知道怎么选中这个图标，已经查了很多资料。我的SCSS代码如下：

select{
  background-color: hsl(209, 23%, 22%);
  border-radius: 4px;
  box-shadow: hsla(0, 0%, 0%, 0.575) 0 0 10px -5px;
  color: #fff;
  padding: 0.75rem 1rem;

  option{
    font-weight: 400;
    font-style: italic;
    color: hsl(0, 0%, 65%);
  }
}

附选择器截图：下拉选择器右侧带有默认的下拉箭头图标

原生<select>的默认下拉箭头是浏览器自带的元素，没法直接选中它单独设置样式，不过可以通过两种方式实现需求：

方法1：隐藏默认箭头，自定义图标（兼容性最优） #

1. 用appearance: none隐藏浏览器默认箭头
2. 自定义箭头图标作为背景图，通过background-position控制图标与右侧的间距
3. 调整padding-right给图标留出足够空间

修改后的SCSS代码：

select{
  background-color: hsl(209, 23%, 22%);
  border-radius: 4px;
  box-shadow: hsla(0, 0%, 0%, 0.575) 0 0 10px -5px;
  color: #fff;
  padding: 0.75rem 2.5rem 0.75rem 1rem; /* 右侧留足图标空间 */
  appearance: none; /* 隐藏默认箭头 */
  /* 用SVG自定义白色下拉箭头，可替换成你需要的图标 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center; /* 这里控制图标右侧的间距 */
  background-size: 16px;

  option{
    font-weight: 400;
    font-style: italic;
    color: hsl(0, 0%, 65%);
  }
}

方法2：父容器加伪元素模拟箭头（部分场景适用） #

给<select>套一个父容器，用伪元素生成箭头并控制位置，同样需要隐藏默认箭头：

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

.select-wrap::after {
  content: "▼";
  color: #fff;
  position: absolute;
  right: 1.5rem; /* 调整这个值控制箭头右外边距 */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* 避免干扰选择器点击 */
}

.select-wrap select {
  background-color: hsl(209, 23%, 22%);
  border-radius: 4px;
  box-shadow: hsla(0, 0%, 0%, 0.575) 0 0 10px -5px;
  color: #fff;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  appearance: none;
  border: none;

  option{
    font-weight: 400;
    font-style: italic;
    color: hsl(0, 0%, 65%);
  }
}

使用时需要把<select>放在<div class="select-wrap">容器内。

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