select/desplegable de colores

jerkan · #1 (**permalink**) 28/02/2007, 04:12

Hola, quiero hacer un select para que el usuario elija un color.
La primera idea fue poner el color directamente y no el nombre del color en cuestión. Intenté poner etiquetas <img> entre los <option></option> pero no me aparecían las imágenes.
Luego, conseguí colores de fondo en los option así:

Código:

<option value="#F00" style="background:#F00">&nbsp;</option>

El problema es que el color seleccionado no se ve reflejado en el campo select.
Encontré esta página donde lo consigue cambiando el color del body o de un div. Yo lo he intentado pero no lo he conseguido.

Otra opción que se me ocurre es hacer algo como el selector de color del formulario nuevo tema de este foro. Parece totalmente hecho con javascript.

Alguna ayuda?

P.D.: Hice esta misma pregunta en el foro de HTML erróneamente.

jerkan · #2 (**permalink**) 28/02/2007, 04:58

He conseguido cambiar el color de fondo con el siguiente código:

Código HTML:

<html>
<head>

	<script type="text/javascript">
	
		function cambia_color(selBackground)
		{
			var bgc = selBackground;
			var bgcVal = bgc.options.item(bgc.selectedIndex).value;
			bgc.style.backgroundColor = bgcVal;
		}
		
	</script>
	
</head>

<body>

<form method="post">

<div id="capa_select_color">
<select style="width:75px" name="selBackground" onchange="cambia_color(this)">
	<option value="#F00" style="background-color:#F00">&nbsp;</option>
	<option value="#0F0" style="background-color:#0F0">&nbsp;</option>
	<option value="#00F" style="background-color:#00F">&nbsp;</option>
</select>
</div>

</form>

</body>
</html>

¿Hay alguna manera para que al pasar por encima de los <option> del select se mantenga el color de fondo? (en firefox se pone azul)