Oscurecer y bloquear un div

[dierrytacato]

Buenos dias, tengo un div que necesito que aparezca sombreado o con algo de opacidad y bloqueado pra que no se pueda clickar en el hasta que se seleccione una opcion anterior.

Hasta ahora lo tengo hecho con display:none para que no se vea, pero necesito que si que se vea pero algo sombreado.


Alguien me puede echar una mano?

Gracias

[pzin]

Normalmente si haces click sobre un div no ocurre nada. Así que la parte de no se pueda clickar no la entiendo. Así que tal vez esa parte debas de solucionarla con JavaScript si necesitas que sea interactivo.

Para la opacidad, puedes usar rgba() o hsla():

Código CSS:

div {
  background-color: rgba(0,0,0,0.5);
}
 

Lo que sospecho es que quieras usar algún tipo de lightbox, ¿tal vez?

[dierrytacato]

Me refiero a que dentro del div hay campos de formulario y algunas cosas mas, y quiero que este como bloqueado que no se pueda hacer nada en el hasta desbloquearlo.

[pzin]

Eso ya es cuestión de HTML. Para eso existe el atributo disabled.

Y de nuevo, tendrás que usar JavaScript para alterar esos atributos.

[dierrytacato]

si si lo de javascript ya lo tengo claro de hecho ya tengo funcionando con ello lo del display.

Probare con el disabled.

Gracias

[dierrytacato]

Pero este atributo es solo para los campo de formulario, no existe algo que pueda aplicar a un div entero y me lo oscurezca un poco y no deje interactuar cn su interior??

[pzin]

Si es un atributo para campos de un formulario.

No existe nada definido para hacer lo que quieres. Se podría conseguir añadiendo un pseudo-elemento que cubra ese área y se superponga.

Código CSS:

div {
  position: relative;
}
 
div:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
  background-color: rgba(0,0,0,.5);
}
 

Con eso debería de funcionar. Puedes añadirle un z-index, aunque en principio no haría falta.