HTML CSS examples for CSS Widget:Image Text
Image select box instead of text select
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .selectThing {<!-- w w w.ja v a 2 s . co m--> position:relative; width:121px; height:121px; z-index:6; } .trigger { position:absolute; width:100%; height:100%; left:0; top:0; z-index:11; background:Chartreuse; cursor:pointer; } #select:target + .trigger { z-index:2; } #select { position:absolute; z-index:6; left:0; top:0; } #select input, #select label { display:none; } #select:target label, #select input:checked + label { display:block; } #select label { width:121px; } #select img { display:block; border:11px solid yellow; } #select input:checked + label img { border-color:blue; } </style> </head> <body> <div class="selectThing"> <div id="select"> <input type="radio" name="thing" id="img1" value="1" checked> <label for="img1" onclick="document.location.hash = '';"> <img src="https://www.java2s.com/style/demo/Safari.png"> </label> <input type="radio" name="thing" id="img2" value="2"> <label for="img2" onclick="document.location.hash = '';"> <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> </label> <input type="radio" name="thing" id="img3" value="3"> <label for="img3" onclick="document.location.hash = '';"> <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> </label> </div> <a class="trigger" href="#select"> </a> </div> </body> </html>