Select con imágenes

[jokin82]

¿Se pueden poner imágenes a las options de los selects?

[urgido]

no, no se puede. Saludos

[lineadecodigo]

urgido, no estoy totalmente de acuerdo contigo. Yo diría que de forma general y estandar no se puede.

Si bien, si pensamos que los visitantes de nuestra web van a utilizar alguno de los navegadores de Mozilla (como el FireFox), quizas les podamos dar algo.

La idea es definir estilos CSS como una imagen de fondo (background-image). Imagen que querramos mostrar en el combo.

<style type="text/css">
<!--
.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;
}
-->
</style>

Ahora solo tenemos que hacer un combo y asignar a los option las clases definidas como estilos. De la siguiente manera:

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


Y ya está. Nuestro combo con imágenes.

Salu2.
Línea de Código.

[urgido]

el se refiere a las opciones... no a un adorno. Saludos

[lineadecodigo]

Que entiendes por adorno???
El ejemplo que he puesto pone las imágenes en las opciones del combo.

Salu2.
Línea de Código.

[AlZuwaga]

Mientras las imágenes sean meramente decorativas, la solución de lineadecodigo (que desconocía) me parece buena. Ahora, si la imagen es contenido, entonces estarías haciendo algo poco accesible. Me parece.

Saludos

[lineadecodigo]

Hay que tener en cuenta que para ser accesible siempre hay que proporcionar un texto alternativo a la imágen. Estemos poniendo la imágen donde la estemos poniendo.

La imágen debería de hacer más usable la página (una imágen vale más que mil palabras). Hacer entender el concepto. Pero nunca sustituir la funcionalidad. Que la daremos con el texto.

Salu2.