2009-07-03 13 views
9

Tengo un formulario donde, dependiendo de la marca del sitio web, uno de los dos campos de entrada debe ser visible en un lugar determinado.¿La entrada es invisible a través de css?

Pensé que simplemente puse ambos campos de entrada en el mismo contenedor y luego a través de mi hoja de estilos establecí uno de ellos para mostrar: ninguno; Esto oculta el campo, pero aún así ocupa espacio. También intenté establecer el alto y el ancho en 0 o configurar la visibilidad en oculto o colapsar, pero ninguno funcionó.

Hasta ahora todas las cosas de la marca se podían hacer con hojas de estilo css, así que me gustaría mantenerlo así. La solución debería al menos ser compatible con IE6 & arriba, Firefox 2 & arriba y Chrome (más reciente).

+1

¿Está utilizando el código de servidor en absoluto? Si es así, puede representar condicionalmente uno u otro campo en lugar de hacerlo con estilos o secuencias de comandos. –

+0

sí, eso es lo que estoy haciendo ahora. Pero como mencioné, me gustaría mantener la marca en el CSS solamente. Ahora tengo que mantener la marca en ambas vistas como las hojas de estilo. –

+0

¿Por qué quieres mantener los cambios de marca solo en el CSS? CSS se usa solo para el estilo: si su marca implica cambiar la estructura del HTML, el lugar apropiado para manejarlo es el HTML. – edeverett

Respuesta

7

¿Qué hay de establecer el campo de entrada invisible a position: absolute; que debería sacarlo del flujo de representación.

Sin embargo, estableciéndolo en display: none debería hacer lo mismo en la teoría ...

+0

Pantalla: ninguno no funcionó. En combinación con la posición: absoluta, sin embargo. ¿Crees que puedes darme una explicación de por qué? –

+0

position: absolute quitará cualquier elemento del flujo de representación, por lo que no tendrá impacto en ningún otro elemento a su alrededor. Es un método muy común para superposiciones y modales. – peirix

+0

Quizás es demasiado viejo, ya no funciona (lamentablemente T.T) –

0

No estoy muy familiarizado con CSS, pero puede intentar implementar JQuery que combina Javascript y CSS para que pueda hacer cosas como esa con relativa facilidad.

+2

Lo sé, pero si es posible, prefiero no confiar en JS, ya que también se ejecutará en máquinas sin JS. –

+0

¡Oh bien! Soy un novato en StackOverflow, entonces ¿debería eliminar mi respuesta? ¡Gracias! –

+0

No, solo mantenlo como está. Es una respuesta válida, simplemente no la mejor;) –

13

¿por qué no utiliza la entrada type="hidden"?

+3

Esto sería bueno. Idealmente, el HTML presentado al usuario debería tener sentido sin la necesidad de CSS. – edeverett

+0

Esto extendería mi lógica de marca sobre la hoja de estilo y las vistas. Ahora necesito mantener la lógica de marca en dos lugares en lugar de uno. –

+0

Mudding la separación de las preocupaciones en las tecnologías que está utilizando para obtener ganancias rápidas rara vez es la ruta a un código de fácil mantenimiento. – edeverett

4
<style> 
.hideme 
{ 
    display:none; 
    visibility:hidden; 
} 
.showme 
{ 
    display:inline; 
    visibility:visible; 
} 
</style> 


<input type="text" name="mytext" class="hideme"> 

Puede establecer class = "hideme" para ocultar su control o class = "showme" para mostrar su control. Puede configurar este cambio de sentido usando JavaScript o la codificación del lado del servidor.

+4

Su visibilidad: oculta, no visible: falsa, y es visibilidad: visible, no visible: verdadera. –

+0

sí, correcto ... lo siento ... era un error tipográfico – Bhaskar

+0

Por favor, consulte la última oración del segundo párrafo en mi publicación –

3

Esto oculta el campo, pero todavía hace que ocupe espacio.

Esto no debería suceder; pantalla: ninguna debe hacer que el elemento no se incluya en el flujo. Comprueba el resto de tu CSS (prueba con Firebug para averiguar dónde está viniendo el "espacio" extra, que probablemente sea solo relleno o margen de algún elemento circundante).

+0

Creo que esta es la única forma en que puedes hacer esto usando CSS (como sugiere la pregunta) ... – Bhaskar

0

El uso de la propiedad de visibilidad ocupa espacio de representación incluso si el elemento no está visible. En lugar de usar visivilidad, debe usar la propiedad de visualización.

Es posible ajustar la pantalla a ninguno si desea ocultar el elemento y la pantalla a bloque o línea si desea mostrarlos.

Para echar un vistazo a la salida de visualización this

Si el establecimiento de su propiedad de presentación no resuelve su problema, entonces creo que los cuadros de texto pueden ser posicionados absolutamente. Puede ser la razón por la cual el diseño no debe ser cambiado.

¿Puede por favor publicar el código completo?

Cuestiones relacionadas