如何给HTML select元素自带的箭头添加右侧内边距？

方案1：保留原生箭头外观实现右侧内边距 #

原生select的箭头是浏览器内置控件，无法直接调整边距，我们可以隐藏原生箭头后用和原生样式高度一致的SVG背景模拟，通过调整背景位置实现右侧内边距，视觉上和原生箭头完全无差异。
对应的CSS代码如下：

.rectangle {
  /* 保留你原有的rectangle样式，新增以下属性 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* 右内边距数值 = 箭头宽度 + 你需要的箭头右侧留白，按需调整 */
  padding-right: 2rem;
  /* 模拟原生下拉箭头的SVG背景 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 12 12'%3E%3Cpath stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  /* right 后面的0.5rem就是箭头距离右侧的内边距，按需调整即可 */
  background-position: right 0.5rem center;
  background-size: 12px 12px;
}

方案2：使用arrow_drop_down图标实现 #

如果要使用arrow_drop_down图标，修改代码如下：
首先修改HTML结构，新增图标节点：

<div class="blood-type">
  <select class="rectangle">
    <option value="" disabled selected>Select One</option>
    <option *ngFor="let bg of bgList" [value]="bg.id">{{bg.name}}</option>
  </select>
  <span class="select-arrow">arrow_drop_down</span>
</div>

新增对应的CSS样式：

.blood-type {
  position: relative;
  /* 根据你的布局调整display属性，inline-block/block均可 */
  display: inline-block;
}
.rectangle {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* 给右侧图标预留空间，按需调整 */
  padding-right: 2rem;
}
.select-arrow {
  position: absolute;
  /* 0.5rem就是箭头距离右侧的内边距，按需调整 */
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  /* 让点击事件可以穿透图标触发select的下拉动作 */
  pointer-events: none;
  /* 确保你已经全局引入了Material Icons字体 */
  font-family: 'Material Icons';
  font-size: 16px;
  color: #666;
}

你之前的代码无效的原因：给外层.blood-type设置右内边距仅会调整父容器的内部间距，不会作用到select内置的箭头上，因此无法生效。

内容的提问来源于stack exchange，提问作者Ayush Patwari