I've been working that as well:

http://lab.robertvanderelst.nl/proforma3.html

Mostly CSS, just a bit of Javascript for the file input :)

I need to put that on Github by the way, I totally forgot :(

You cannot actually do a whole lot with native HTML <select> as the style implementations are different everywhere and are dependent on the browser/OS of the user. I would actually recommend using a <ul> instead as it would give you a lot of flexibility in terms of styling.

That said, one way you can style a select is by using appearance property, give the <select> tag an appearance:none; so the default styles are stripped off.

Then you can wrap it inside a div and style that div instead. here's a quick pen I made for the demo: codepen.io/alkshendra/pen/gPyEOo

The browser support for appearance is quite good, you can use the usual vendor prefixes and it'd work across most browsers. Check caniuse for a detailed support guide.

Here's a codepen for CSS Dropdown

I would say using <ul> and <li>, just because you can add <ul> inside <li> and that makes it easier. Now for everything on the styling part, with just CSS you can make it work, making it that when your li is hovered you change the display on the ul inside your li. The negative side of using only css is that you can't add fancy animations on display. Now, for the responsive side of <ul> a select would be a better way to go but it's way trickier to make it work than just have other menu hidden to show only on devices also selects and inputs behave very different between devices and browser which makes it more to deal with.