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

Question

I'm trying to follow a design of a select dropdown-list where:

• Padding: 0 10px 0 10px

However, the arrow is not being adjusted at all. It keeps sticking to the right end. Please see attached screenshot for reference.Front End Screenshot

You can also view my codes here

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)

Thanks!

Answer 1

I used border-right property and it worked.

select {
  border-right: 16px solid transparent
}

The problem with wrapper element and ":after" is that, it does not toggle the "select" dropdown when you click on the arrow icon.

Working example: https://jsfiddle.net/asaad7/r8sx9m7e/