For a long time it's been something I've needed to implement - a new version of my select element on my website.
Some of you may already know that styling select elements isn't easy and is incredibly restrictive in all of the main browsers. I'm sick of this attitude from the developers of these browsers and I really couldn't be bothered wasting my time trying to pull off some hack that fixes that so instead I followed my technique I used to create the radio buttons and checkboxes on this website - hide the actual form component and wrap it in a label. I call this BalfPick.
BalfPick is nearly finished and it's already across my website. I've had a few issues with Windows tablets but overall it's working on Android, iOS, Mac OS X Firefox, Chrome and Safari and the Windows equivelants with click and Edge on Windows. Surprisingly, each browser acts very differently and each operating system works differently too. As well as that, click and touch events must be registered differently (I developed a rather crude but very clever method for stopping click and touch events being registered at the same time in BalfBar back in 2014 and I'm using a slightly better version of that in BalfPick now too).
BalfPick is also available as a jQuery plugin as with the rest of my Web Independently Styled Project. What makes BalfPick different is it's unique support for both a really attractive desktop dropdown and it's ability to support the native dropdown on touch devices.
I'm also planning on bringing BalfPick to Dash in the next few days because some of the dropdowns could do with this.
Take a look at an example of this on my site here https://www.jamiebalfour.scot/about/interests/gaming/warcraft3/spellcraft/.
