I had the same issue and ended up praising this article for being on spot:

If you decide that it’s absolutely a good idea to customize a dropdown, then you should use JavaScript to:

• Accessibly hide the original select.
• Rebuild the select with custom markup (probably a definition list), that you style how you want.
• Replicate all the functionality that default selects have, which include: keyboard events like up and down arrow keys and return to select, scrolling of long lists, opening the menu upwards when select is against bottom of screen, to name a few. ....

https://css-tricks.com/dropdown-default-styling/

I'd recommend not touching system defaults for "default-selects". If you really need a solution, check out ready-made plugins like the great tomselect: https://tom-select.js.org/ etc ...

I have had a similar problem in the past and I can tell you I have not found any answers, believe me. If you open "select dropdowns" on a mac, the options appear OVER the input. If you do the exact same thing with the exact same code on a windows pc, the dropdown options appear below the input, which is what you want. I strongly advise you to move on to another problem as the solution to your simple problem is much more complicated than it might seem...

As far as I know the select tag styling not only depends on the browser but also on the OS as well - the element is styled after the OS display settings, so essentially there's not much you can do with the native element.

I assume that the initial thinking behind the select styling had something to do with accessibility settings.