Partamos de la base de que esto involucra más a JavaScript que al propio Css
Para usar un select, vi varios plugins de jquery, pero ninguno hacía exactamente lo que queres. Con checkboxes si es posible algo similar, utilizando imágenes, o una capa a la que se le cambie el texto y el color, yo he usado el primer método, con imágenes
Código PHP:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>chk img</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
.boxes {
/* descomentar la siguiente linea para ocultar los checkboxes */
/* display: none; */
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function testchk(){
var valor = document.getElementById('chk_id').checked;
var valor2 = document.getElementById('chk_id2').checked;
alert(valor + '-' +valor2);
}
function check(checkboxid,imag,reemplazo,defecto) {
var valor = document.getElementById(checkboxid).checked;
if (valor == false){
document.getElementById(checkboxid).checked = true;
document.getElementById(imag).src = reemplazo;
}else{
document.getElementById(checkboxid).checked = false;
document.getElementById(imag).src = defecto;
}
}
//]]>
</script>
</head>
<body>
<img src="checkboxbg.gif" onclick="check('chk_id',this.id,'checkboxbg2.gif','checkboxbg.gif');" width="110" height="150" alt="" id="uno" />
<img src="checkboxbg.gif" onclick="check('chk_id2',this.id,'checkboxbg2.gif','checkboxbg.gif');" width="110" height="150" alt="" id="dos" />
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get">
<p class="boxes">
<input type="checkbox" id="chk_id" name="preferencias[]" value="internet" />
<input type="checkbox" id="chk_id2" name="preferencias[]" value="deportes" />
</p>
<p>
<br />
<input type="submit" name="procesar" value="enviar"/>
</p>
</form>
<p>
<br />
<a href="#" onclick="testchk();">Verificar</a>
</p>
<?php
if(isset($_GET['procesar'])){
$prefs = $_GET['preferencias'];
echo "tus preferencias son: <br />";
for($i=0; $i < $N; $i++){
echo $prefs[$i] . "<br />";
}
}
}
?>
</body>
</html>
La función de js function testchk(), solo está para verificar el funcionamiento, y los checkboxes estan visibles por la misma razón, edita el css para ocultarlos.
Te dejo una demo (las imágenes son solo de prueba, tendrías que hacer algo descriptivo)
http://foros.emprear.com/javascript/checkboxes-ocultos/
y seguramente se le pueden hacer algunas optimizaciones
Saludos