problema al aplicar z-index a elementos select de formulario

Tengo por una parte un formulario con algunos campos select. Por otra, tengo unas capas que se muestran por encima del formulario. El problema es que...

La FAQ problema al aplicar z-index a elementos select de formulario tiene

Pertenece a la categoría:
Pregunta
Tengo por una parte un formulario con algunos campos select. Por otra, tengo unas capas que se muestran por encima del formulario. El problema es que los elementos select del formulario siempre se muestran por encima de las capas, cuando deberían mostrarse por debajo. Esto sólo pasa con los elementos select.

Es decir, aunque modifico con z-index para que las capas se muestren por encima, no consigo que los campos select se queden debajo. Se queda todo el contenido por debajo (como debería ser) pero los select se muestran encima.

Qué puedo hacer para evitar esto?
Respuesta de Miguel Angel Alvarez
He estado mirando esto y haciendo unas pruebas y no he encontrado solución. En realidad, lo que he encontrado parece indicar que no se puede hacer nada para evitar que los elementos de formulario <select> aparezcan por arriba de otras capas. Lo lógico es pensar que la propiedad z-index de CSS marcaría la posición de los elementos en la página, por encima o por debajo de otras capas, pero esto no ocurre con los <select> y otras etiquetas como <object>.



Esto es porque los ciertos componentes de la página (elementos de formulario selec, applet, object, plig-is y en algunos navegadores iframe), son elementos propios del sistema operativo y quedan en algunos casos fuera del control de las hojas de estilo. En inglés le llaman Windowed a estos elementos y Windowless a los otros (la gran mayoría), que sí se pueden editar por completo con CSS.


Firefox, por lo menos con los elementos <select>, no se presenta este problema.


Una posible solución podrá ser ocultar la capa donde está el <select>, o el propio select, cuando se muestra algo que se debe ver por encima. Otra solución sería utilizar la propiedad clip, para ocultar sólo la parte del campo select que debería mostrarse por debajo de la capa.

Volver al árbol de categoríasVolver al árbol de categorías

Comentarios

pepe

20/1/2006
El problema es con los componentes activex en explorer, te recomendaria que bajo la capa que deseas que "flote" sobre el select, pusieras un iframe flotante con un fondo. El iframe actua de fondo al div, "pisando" al elemento (select u otro) que este por debajo. Existen otras opciones, pero creo que la mas sencilla es esa

Alfredo LAnda

10/4/2006
Es correcto el funcionamiento de los select que apunta Miguel. Pero hay un tratamiento especial para estos select que es con la propiedad "chatin" igualandolo a true.

ej:
<script>
document.formulario.nombre_select.chatin=true;
</script>

Un saludo

PGT

01/11/2006
Muy buena idea lo del iframe...funciona perfecto

viagro

18/3/2007
Puestos a chapucear y con motivo de no tener problemas a la hora de hacer scroll. Se me ha ocurrido lo siguiente:
defino mi select y defino en una capa un input text igual al del select y con display='none'. Cuando quiero mostrar la capa por encima, obtenego el valor de texto del select se lo introduzco al campo input, oculto el select y muestro el input, cuando termino, realizo la operación inversa.

Salu2

luar29

22/3/2007
Utiliza la propiedad display para ocultar o mostrar el select. Por ejemplo:

Para ocultarlo,

document.getElementById("Id_campo").style.display="none";

Para verlo nuevamente,

document.getElementById("Id_campo").style.display="inline";

Pedro

11/8/2007
Hola, me podrias decir como solucionaste el problema....
FAQ relacionadas
Volver al árbol de categoríasVolver al árbol de categorías