Select with images (Pure CSS)

To view this code, just save this file.

About this

Browsersupport

This pure CSS Select may not be supported by all browsers, since it uses pseudo-elements on either a radio or a checkbox input, which according to W3 should not be possible...

Altough it should'nt be supported, it still is, which is why I created this (I tested it on Chrome, Firefox & Edge).

Disadvantages

When opening the single select menu, the user can't hold the mouse down forever... The click speed needs to be less than 0.3s (sounds faster than it is) because the select menu dissapears after 0.3s.

Unfortunately, the focus of the menu is lost before the radio button is checked.. which is a little weird, but I can't change the behaviour of the browser...

Examples

Single select

Select country

Multi select

Select countries