I want to make the second select box arrow become the same with the first one. But I have no idea why they are different, because I didn't style the arrow.
Browsers and OS's determine the style of the select boxes in most cases, and it's next to impossible to alter them with CSS alone. You'll have to look into replacement methods. The main trick is to apply
appearance: none which lets you override some of the styling.
My favourite method is this one:
It doesn't replace the OS select menu UI element so all the problems related to doing that are non-existant (not being able to break out of the browser window with a long list being the main one).
Good luck :)