html-select - 如何在选择下拉列表中向默认箭头添加填充？

Question

我正在尝试遵循选择下拉列表的设计，其中:

填充:0 10px 0 10px

然而，箭头根本没有被调整。它一直坚持到正确的一端。请参阅随附的屏幕截图以供引用。 Front End Screenshot
You can also view my codes here
有没有办法瞄准特定的箭头并对其应用填充？ (旨在对双方的输入文本保持相同的填充)
谢谢!

Answer 1

对于那些有同样问题的人，我找到了一种解决如何设置默认选择“箭头”样式的方法，即用生成的内容替换它。
第 1 步:隐藏默认箭头

select {
  -webkit-appearance: none;
  appearance: none;
}

第 2 步:在 select 周围创建额外的包装器，因为::before/::after 不能以这种方式工作。

<div class="select-wrapper"><select id="select" name="select">
  <option>Banana</option>
  <option>Cherry</option>
  <option>Lemon</option>
</select></div>

第 3 步:应用生成的内容

.select-wrapper {
  position: relative;
}

.select-wrapper::after {
  content: "▼";
  font-size: 1rem;
  top: 6px;
  right: 10px;
  position: absolute;
}

以上代码来源于
Advanced form styling | MDN