Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS
Desde 0 | HTML | CSS | ASP | PHP | AJAX | Javascript | Promoción de webs | Rentabilidad de webs
Directorio | Manuales | Scripts | FAQs | Programas | Artículos Copyleft | Actualidad | La Cosecha | Colabora
Registrarse | Vuestras páginas | Foros del web | Lista de correo | Boletín de novedades
Generador METAs | Compras | Busca cursos
Alojamiento | Dominios.es | Micropagos SMS | Buscadores | Patentes, marcas | Creación web | Multimedia | Videos
Desarrollo Freelance | Buscar proyectos | Buscar profesionales | Solicitar desarrollo

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 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?

La FAQ problema al aplicar z-index a elementos select de formulario tiene Pertenece a la categoría:


 Respuesta de Miguel Angel Alvarez  12/1/06 
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.

Complementar la respuestaComplementar la respuesta
Volver al árbol de categoríasVolver al árbol de categorías

 Comentarios de los visitantes
Se muestran 3 comentarios revisados

 Comentario de pepe
20/1/06 
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

 Comentario de Alfredo LAnda
10/4/06 
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

 Comentario de PGT
01/11/06 
Muy buena idea lo del iframe...funciona perfecto

 Comentarios sin revisar
Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.
 Se han encontrado 3 comentarios sin revisar

Ver el comentario no revisadoVer los comentarios no revisados
 
FAQ relacionadas
  + Estilos en barras de desplazamiento
  + Estilos CSS en los botones de formularios y Netscape 4
  + Manuales de CSS
  + Enlaces que cambian al pasar el ratón
  + ¿Cómo puedo cambiar el color de las celdas cuando paso el puntero por encima de ellas?
  + ¿Como puedo cambiar el color de la barra de desplazamiento?.
  + Diferencias de colocar estilos CSS en distintos lugares
  + Cambiar color a los enlaces
  + Quitar subrayado a los enlaces
  + Quiero personalizar los links de mi página para que todos sean distintos los unos de los otros
  + Estilo en los campos de formulario
  + Cambiar el tamaño de letra de un menú select
  + Cambiar el estilo de la primera letra de un párrafo
  + Aplicar estilo a la primera línea de un texto
  + Menú dinámico con CSS
  + Textarea sin borde
  + Clip en un div
  + Efecto sombra en mi página
  + Maquetar un boletín con CSS
  + Caja con CSS
  + Estilo en tablas HTML con CSS
  + Aspecto del cursor con CSS
  + Capas en CSS
  + Qué es Shorthand
  + Maquetar una web con CSS
  + Maquetar por tablas o por capas
  + Algunos programas para editar CSS
  + Maquetar galería de fotos con CSS
  + Rollover con CSS
  + Botones con estilos
  + ¿Qué Significa CSS?
  + Minúsculas con CSS
  + Hojas de estilo en cascada (CSS)
  + Formulario con CSS
  + Efecto de sombra con CSS
  + Cambiar tipografía para toda la página
  + Imprimir con CSS
  + Comentarios en CSS
  + Cómo eliminar los márgenes abajo y arriba que tiene un formulario
  + Definir los márgenes de un encabezamiento o título <h1>
  + ...

Para ver más FAQ relacionadas accede a las categorías:

Complementar la respuestaComplementar la respuesta
Volver al árbol de categoríasVolver al árbol de categorías

DesarrolloWeb.com | Copyright | Anunciese | Acerca de | Datos legales | Contacta | Por GuiarteMultimedia