Apparently, support for styling this arrow is slim and doing so is more of a hack than anything that makes sense. The following CSS was used on a Gravity Form select field to style the down arrow. The first three lines direct different browsers to make that arrow disappear. Then we set and position a background image with our new arrow. The background image in this case is raw SVG code. I obtained this by creating my desired SVG, then opening the SVG in a code editor. The rest was obtained by referencing a Stack Overflow post.
selector select#input_1_4_4 {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="100%" height="100%" viewBox="0 0 31 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(1,0,0,1,-12.8047,-10.2554)"><path d="M15.305,10.255L12.805,12.755L28.305,28.255L43.805,12.755L41.305,10.255L28.305,23.255L15.305,10.255Z" style="fill:rgb(0,166,206);"/></g></svg>');
background-position: 95% 50%;
background-repeat: no-repeat;
background-size: 1em;
}This could be expanded with pseudo-classes, such as to change the color (change the image) on hover, or flip the image when the select box has been clicked and expanded.