Styled Select Boxes

<select> boxes, and their children, <option> tags are nigh unstylable; so we’re not even going to try—we’re simply going to hide the element using opacity.

The opacity property differs from display:none; and visibility:hidden; in that the element is still shown, but happens to be invisible. As such, an element with opacity:0; still responds to tab order and mouse/touch events.

Altering opacity allows us then, to still make a <select> box useful, even if it cannot be seen. And here’s the trick—normally, a child element would inherit the style of the parent. For example, a <strong> tag will render blue if nested inside a <p style="color:blue;">. But as aforementioned, <option> tags are so unstylable, they completely ignore the <select> element’s opacity!