Creating a custom <select> element

I need to create a <select> input using a custom DropDown element so the styles can be changed. In order to decide if that's a good idea or not I have investigated about pros and cons.

Currently, at work, we are implementing some beautiful custom inputs for our Page Editor (a WYSIWYG editor that is being used inside Liferay). When I found that I needed to create a custom <select> element, I though it would be as easy as creating a simple dropdown with a bit of JS.

I didn't now how wrong I was until I started investigating about how select works and which aria-roles could I use to emulate it's behavior. There is no exact select role, but I found that using a combination of haspopup, listbox and option gives a valid result that can also be made accessible.

This HTML is more or less based on a W3C collapsible dropdown listbox demo (linked below) with a custom JavaScript implementation to manage keyboard navigation and some click events.

These are some interesting articles and videos I found during my investigation (thanks to Eduardo Allegrini for his help 😄):

Demo

See the Pen Accessible custom <select> by Pablo Molina (@p2kmgcl) on CodePen.