<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 property differs from
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!