Cómo deshabilitar un elemento en CSS

Con CSS existen muchas maneras de deshabilitar un elemento y tendrás que usar una u otra en función de tus necesidades. Te comento a continuación las principales:

Hacer que un elemento desaparezca completamente de la página. Esto es lo que más se utiliza habitualmente.

#elemento {
    display: none;
}

Ocultar un elemento pero dejar en blanco el hueco que ocupaba originalmente

#elemento {
    visibility: hidden;
}

Mostrar el elemento semi-transparente para que parezca deshabilitado. El valor de opacity puede ir de 0 (invisible) a 1 (completamente visible).

#elemento {
    opacity: 0.2;
}

Si se trata de elementos de formulario, entonces puedes jugar directamente con los atributos HTML.

Hacer que el campo sea de sólo lectura. Su aspecto será el de un campo de formulario normal, pero su valor no se puede modificar:

<input type="text" name="campo" value="Lorem ipsum..." readonly />

Deshabilitar el campo para que el usuario vea claramente que no se puede modificar su valor:

<input type="text" name="campo" value="Lorem ipsum..." disabled />

En este último caso, tienes que tener cuidado porque existen varias diferencias entre los atributos readonly y disabled. La principal es que los elementos con atributo disabled no se envían junto con el resto de elementos del formulario.

@javiereguiluz

18 septiembre 2014, 23:13

No, eso no es lo que quiero. Tal vez me expliqué mal. Lo que quiero es saber cómo invalidar el z-index si tengo varios elementos así:

#elemento {
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 8;
}

¿Cómo les invalido el z-index ahí? ¿Alguna manera de hacerlo? Que no sea por comentarios porque son demasiados :D

Gracias

@SAMMYVARGAS6

19 septiembre 2014, 23:09

Creo que ahora sí que lo he entendido. Lo que quieres es resetear el valor de la propiedad z-index de CSS en varios elementos. Para ello simplemente tienes que seguir el mismo procedimiento que al resetear cualquier otra propiedad CSS: debes establecer el valor por defecto de esa propiedad.

En el caso de la propiedad z-index, su valor inicial es auto, así que tendrías que hacer lo siguiente:

#elemento {
    z-index: auto;
}

Dependiendo de cómo hayas definido los selectores y los estilos CSS, es posible que debas añadir la palabra clave !important para que te funcione:

#elemento {
    z-index: auto !important;
}

Pero siempre que sea posible debes evitar el uso de !important, así que intenta hacerlo funcionar sin añadir esta palabra clave.

@javiereguiluz

19 septiembre 2014, 23:27

vale gracias lo probare ya mismo :D

@SAMMYVARGAS6

19 septiembre 2014, 23:30