In Firefox you can just add background image to option:
<select>
<option style="background-image:url(male.png);">male</option>
<option style="background-image:url(female.png);">female</option>
<option style="background-image:url(others.png);">others</option>
</select>
Better yet, you can separate HTML and CSS like that
HTML
<select id="gender">
<option>male</option>
<option>female</option>
<option>others</option>
</select>
CSS
select#gender option[value="male"] { background-image:url(male.png); }
select#gender option[value="female"] { background-image:url(female.png); }
select#gender option[value="others"] { background-image:url(others.png); }
In other browsers the only way of doing that would be using some JS widget library, like for example jQuery UI, e.g. using Selectable.
From jQuery UI 1.11, Selectmenu widget is available, which is very close to what you want.
And do you have any W3C-valid solution in 2015? Without re-implementing select box?
How about in 2017? Still no solution?
@IvanKuckir - Pffff. W3C is still "discussing" the reasons why and why not this should be done, and after implementing a study about the topic, a committee will then discuss the potential advantages and disadvantages of enabling this. Once done, there will be a field study about backward compatibility. They will then slap a study for the color blind people. Once the recommendation is made, there will be a study about potential side effects on other elements (such as the check box). After all that, they will have a study to decide if all those studies where needed.
Firefox does not support the above mentioned method anymore.
almost 2020 and we are still in middle Ages