Hey everyone.

NOTE: I've not included code here because it seems irrelevant in this instance but if requested I will link a code snippet.

So, as we all know, the default styling for a select and option drop down are white, rectangular boxes, with no border radius. I'm currently developing a website for a local business. It's relatively low function, and gets the job done, but there are some admin forms I'm creating so the business can add inventory items to send to the database and then list them so customers can see what's available. One of the inputs is a select input.

I've tried everything I can think of to fix this... cleared browser cache, tried a brand new php file with only boilerplate code and a test select box with no CSS attached (in case there was something in my CSS files interfering with it which is doubtful anyway), restarted the browser, restarted my dev server, (I've even tried working in a new server environment just in case), completely (temporarily) deleted ALL of my CSS and cleared cache, etc etc. The select box itself doesn't have a border radius, and looks normal.

HOWEVER. The issue is that the drop down box itself has a border radius--it's ugly, doesn't match the layout, and as far as I'm aware, it's not possible to change it manually with CSS. The border radius isn't small either, it's at least 20%. So I have a completely square/rectangular select box with an extremely rounded drop down attached to it.

It almost seems like this is something that has either been changed with how HTML/CSS defaults the styling for it, OR, how Chrome reads it and styles it by default.

Anyone know a good way to change this without having to custom make a dropdown box? I could easily do this, but seems stupid to have to do considering the default should have ZERO border radius.

The only thing I have not tried yet is using it on a different web browser. I will try that and post an update when I see if that works or not.