Custom styling of the SELECT elements

The solution here is actually a workaround, trick. It works in a way that it dynamically adds an additional SPAN element positioned absolutely below the SELECT element. This SPAN has a custom graphic that we want to apply. SELECT element’s opacity is set to zero so it is not visible but it’s clickable. Since the SELECT element is not visible, what we see actually is the SPAN below. This solution doesn’t style the OPTION dropdown, only the default appearance of the SELECT element but considering the simplicity I believe that it is very applicable. Important thing to remember: this trick relies heavily on absolute positioning.

Leave a Reply

Your email address will not be published. Required fields are marked *