如何将自定义Select组件的SVG箭头贴近右侧边缘？

已完成Select元素的箭头自定义，但运行时箭头距离右侧边框较远，希望实现箭头贴近右边缘的效果。现有代码如下：

CSS代码 #

.listbox_length_menu_datatable {
  background-color: #E8E8E8;
  border: none;
  border-radius: 5px;
  font-size: 0.58em;
  font-weight: 650;
  padding-left: 0.4rem !important;
  padding-top: 0.1rem !important;
  padding-bottom: 0.1rem !important;
  padding-right: 1.5rem !important;
  background-position: calc(100% - 0.75rem) center !important;
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 50px !important;
}

.listbox_length_menu_datatable.medium {
  background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path 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'/></svg>") no-repeat;
}

HTML代码 #

<select class="form-select listbox_length_menu_datatable medium">
  <option value='5'>5</option>
  <option value='10'>10</option>
  <option value='20'>20</option>
  <option value='30'>30</option>
  <option value='-1'>Tous</option>
</select>

解决方案 #

要让箭头贴近右侧边框，需要调整两个核心属性，同时修复背景样式覆盖问题：

1. 缩小右侧内边距
   当前padding-right: 1.5rem给右侧预留了过多空间，可将其调整为更小的值，比如0.8rem，既避免选项文字被箭头遮挡，又能压缩箭头与边框的间距：

   padding-right: 0.8rem !important;
   

2. 调整箭头背景位置
   把background-position里的偏移值减小，比如从calc(100% - 0.75rem)改为calc(100% - 0.3rem)，让箭头更靠近右侧边框，可根据实际视觉效果微调这个数值：

   background-position: calc(100% - 0.3rem) center !important;
   

3. 修复背景颜色被覆盖问题
   .medium类中的background属性会覆盖基础类的background-color，建议将background改为background-image，并保留背景颜色：

   .listbox_length_menu_datatable.medium {
     background-image: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path 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'/></svg>");
     background-repeat: no-repeat;
     background-color: #E8E8E8;
   }
   

修改后的完整CSS #

.listbox_length_menu_datatable {
  border: none;
  border-radius: 5px;
  font-size: 0.58em;
  font-weight: 650;
  padding-left: 0.4rem !important;
  padding-top: 0.1rem !important;
  padding-bottom: 0.1rem !important;
  padding-right: 0.8rem !important;
  background-position: calc(100% - 0.3rem) center !important;
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 50px !important;
}

.listbox_length_menu_datatable.medium {
  background-image: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path 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'/></svg>");
  background-repeat: no-repeat;
  background-color: #E8E8E8;
}

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