如何缩小Bootstrap form-select元素的背景图片尺寸？

你当前使用Bootstrap的form-select组件自定义了下拉选择框，HTML结构如下：

<select class="form-select listbox_length_menu_datatable">
    <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>

对应的自定义样式：

.listbox_length_menu_datatable {
    background-color: #E8E8E8;
    background-image: url(icones/triangle-black.png);
    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;
}

要缩小背景图（下拉箭头）的尺寸，可通过以下方法实现：

• 使用background-size属性指定图标宽高，比如设置为8px 6px（数值可根据需求调整），强制缩放背景图到目标尺寸；
• 搭配background-position调整图标位置，避免尺寸变化导致的偏移，适配你设置的内边距；
• 补充background-repeat: no-repeat确保图标仅显示一次。

修改后的完整CSS代码：

.listbox_length_menu_datatable {
    background-color: #E8E8E8;
    background-image: url(icones/triangle-black.png);
    /* 自定义背景图尺寸 */
    background-size: 8px 6px;
    /* 调整背景图位置，适配内边距 */
    background-position: right 0.4rem center;
    /* 禁止背景图重复 */
    background-repeat: no-repeat;
    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;
}

说明：

• background-size也可用百分比值，比如50%表示缩放到原尺寸的一半，或用contain让图标完整显示且不超出元素范围；
• 位置数值可根据实际视觉效果微调，确保图标和文本布局协调。

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