Combos con imágenes

Mientras que esperamos a que XForms se convierta en el estándar soportado por los navegadores para el desarrollo de formularios (espero que XHTML 2.0 lo de el impulso necesario), nos vemos obligados a realizar verdaderas virguerías con los formularios de HTML 4.01. En este caso lo que queremos es que nuestros combos de selección nos aparezcan con imágenes y que pueda seleccionar una de ellas. ¿Es esto posible? La respuesta a esta pregunta es difícil. Podríamos decir que imposible no es. Pero que el soporte que se da desde los navegadores a este caso es mínimo. Para que nos hagamos una idea, solo funciona con los motoresMozilla (FireFox y compañía). La idea es la siguiente. En primer lugar, utilizando hojas de estilo CSS definiremos tres elementos cuadrado, circulo y triangulo. Estos tres elementos tendrán una imagen de fondo representativa. Para indicar la imagen de fondo de un elemento utilizamos el atributo background-image. Veamos como quedaría definido:

.circulo {
  background-image: url(circulo.jpg);
  height: 50px;
  width: 50px;
  background-repeat: no-repeat;
}
.triangulo{
  background-image: url(triangulo.jpg);
  height: 50px;
  width: 50px;
  background-repeat: no-repeat;
}
.cuadrado{
  background-image: url(cuadrado.jpg);
  height: 50px;
  width: 50px;
  background-repeat: no-repeat;
}

Hay que indicar que hemos utilizado otros atributos. El primero es el alto y ancho (height y width respectivamente). La idea es tener imágenes uniformes de 50x50 pixels. El otro atributo es background-repeat, al cual hemos dado un valor de no-repeat. Esto significa que solo se mostrará la imagen de fondo una vez. Y es que si usamos este estilo dentro de un área de 100x50 veremos que, por defecto nos aparece duplicada la imagen. Ahora solo nos quedará definir el combo y asignar los estilos necesarios en cada opción. De la siguiente forma:

<select>
  <option class="cuadrado">Cuadrado</option>
  <option class="circulo">Circulo</option>
  <option class="triangulo">Triangulo</option>
</select>

Y ya está. Ya tenemos nuestro combo con imágenes. El cual, en FireFox, nos quedará de la siguiente manera: