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

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/