How to add padding to the default arrow in a select dropdown menu?

I'm trying to follow a design of a <select> dropdown menu with padding: 0 10px 0 10px

However, the arrow is not being adjusted at all. It keeps sticking to the right end:

Is there a way to target the specific arrow and apply paddings to it? (Aiming to keep the same padding applied to the input text for both sides)

For those who have the same question, I found a work around how to style the default select "arrow" which is by replacing it with generated content.

Step 1: Hiding the default arrow

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

Step 2: Create extra wrapper around select, because ::before/::after doesn't work this way.

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

Step 3: Apply generated content

.select-wrapper {
  position: relative;
}

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

Codes above originated from Advanced form styling | MDN