How do you style the arrow in a Select element?

Site URL: http://www.themobiuscollective.org/

I have a dropdown in a Squarespace form. I've used custom CSS to increase the padding and font size, but the arrow in the dropdown seems unaffected. The goal is to increase the size of the arrow, and to move the arrow to the left, so it's the same distance from the edge as the text in the dropdown (i.e. the arrow  has padding on the right).

Thanks!

Turns out this requires removing the default arrow and adding your own, either as a background image or using CSS gradients. Here is a reference to the CSS, https://codepen.io/vkjgr/pen/VYMeXp

Did you solve?