Hola:
He intentado implementarlo un poco. No es que sean imágenes grandes, son más bien iconitos. Pero de momento funciona (FF2). No he podido aumentar la implementación a IE porque no lo tengo disponible en este momento, pero creo que no será muy dificil.
Dejo el ejemplo. He utilizado CSS para los option, y se ponen directamente. Lamentablemente cuando un option está seleccionado, en el select no aparece la imagen, así que hay que colocarlo con javascript.
Es la primera vez que trabajo con el
document.styleSheets para modificar las propiedades externas de las hojas de estilo, y poder separar el CSS del XHTML.
Bueno, la cosa queda así:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<html>
<head>
<style type="text/css">
#elSel {
padding-left: 25px;
background-repeat: no-repeat;
background-position: 3px 50%;
}
#elSel option {
padding-left: 25px;
background-repeat: no-repeat;
background-position: 3px 50%;
}
#opcion1 {
background-image: url(http://www.forosdelweb.com/images/smilies/smile.gif);
}
#opcion2 {
background-image: url(http://www.forosdelweb.com/fdwtheme/images/statusicon/user_online.gif);
}
#opcion3 {
background-image: url(http://www.forosdelweb.com/fdwtheme/images/buttons/report.gif);
}
#opcion4 {
background-image: url(http://www.forosdelweb.com/fdwtheme/images/buttons/reputation.gif);
}
#opcion5 {
background-image: url(http://www.forosdelweb.com/images/smilies/dedosarriba.gif);
}
</style>
<TITLE></TITLE>
</head>
<body>
<select id="elSel">
<option value="" id="opcion1">
uno
</option>
<option value="" id="opcion2">
dos
</option>
<option value="" id="opcion3">
tres
</option>
<option value="" id="opcion4">
cuatro
</option>
<option value="" id="opcion5">
cinco
</option>
</select>
<script type="text/javascript">
function getReglas() {
return document.styleSheets[0].cssRules;
}
function getRegla(selector) {
var reglas = getReglas();
for(var i=0, l=reglas.length; i<l; i++) {
if( (reglas[i].selectorText) && (reglas[i].selectorText==selector) ) {
return reglas[i];
}
}
return false;
}
var elSel = document.getElementById("elSel");
function actualizaImgSelect() {
var i = elSel.selectedIndex + 1;
var laRegla = getRegla("#opcion"+i);
if( laRegla ) {
elSel.style.backgroundImage = laRegla.style.backgroundImage;
}
}
window.onload = actualizaImgSelect;
elSel.onchange = actualizaImgSelect;
</script>
</body>
</html>
A ver si a alguien le apetece hacer que funcione en IE.
Un saludo.