Glossy Social Media Select Box
A social media drop down menu made with (almost) pure CSS3. Here I use a combination of CSS3 gradients and box shadows to create the realistic effects.
Basically, the arrow keys on the right side is a pseudo element of <label>
, then I cover it with a fit size checkbox element. After that, I remove the checkbox element visibility using zero opacity. So, when you click on the drop down arrow, what happens actually is that you're clicking the transparent checkbox element above it.
More about checkbox hack ⇒