<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!
Le Code: CSS
Le Code: JavaScript