Focus con css

[xinxan22]

Buenas noches,

se puedes hacer algo así con css (me interesa que cuando hago focus en un campo de texto input, a demás de cambiar su propio estilo, cambie otro estilo referente a una div):

Código HTML:

#id_contenedor{
  ...
  opacity: 0.6;
}
#id_input{
  ...
}
#id_input:focus{
 ...
 #id_contenedor--> opacity: 1;
}

<div id="id_contenedor"><input type="text" id="id_input" /></div> 

Gracias,

Saludos

[DrFaust]

¡Hola!

No; por desgracia eso que querés hacer, y que sería muy útil, no es posible desde CSS.

Por suerte es extremadamente fácil de hacer con jQuery, una librería JavaScript para hacerle la vida más fácil a los desarrolladores. Internet está lleno de tutoriales de jQuery, y además es una herramienta muy simple. Lo que querés hacer se vería más o menos así:

Código:

    $("#id_input").focus(function() {
        $("#id_contenedor").css("opacity", 1);
    });

    $("#id_input").blur(function() {
        $("#id_contenedor").css("opacity", 0.5);
    });

[Alexis88]

Siento tener que desmentir lo dicho por DrFaust, pues sí hay forma de trabajar con el enfoque en una caja de texto u otro elemento focusable. Para esto existe el selector :focus.

Código CSS:

#miInput:focus{
  width: 20em;
}
 
#miInput:focus ~ #miDiv{
  width: 20em;
  height: 10em;
  background: linear-gradient(black, white);
}
 

De este modo, cuando la caja de id "miInput" tenga el enfoque, crecerá hasta 20em su ancho y el Div de id "miDiv", el mismo ancho indicado para la caja, además de una altura de 10em y un color de fondo degradado.

Así es como se ve: http://jsbin.com/eFeneCep/1

Saludos

[xinxan22]

Hola DrFaust, jQuery es como lo estoy usando actualmente, gracias. Pero me interesa hacerlo en css haber si se puede hacer.

Gracias por la respuesta

Hola Alexis88, lo estoy probando y no me funciona, podría ser que es porque tengo el input dentro del div?

Este es el código:

Código HTML:

<div id="id_contenido"><input type="text" id="id_input" /></div>


#id_contenido{
  background: #009755;
  opacity: 0.6;
  position: absolute;
  z-index: 10;
}
#id_input{
  background: #009755;
  border: 0;
  color: white;
  font: 16px 'Arial';
  width: 100px;
}
#id_input:focus{
  background: white;
  color: #009755;
  outline: none;
  width: 300px;
}
#id_input:focus ~ #id_contenido{
  opacity: 1;
  background: red;
}

Esto no me funciona:

Código HTML:

#id_input:focus ~ #id_contenido{
  opacity: 1;
  background: red;
}

Gracias.

Saludos

[Alexis88]

Tal y como se explica en la página de la W3C, la manera de seleccionar al elemento contenedor de un elemento, es la siguiente:

Código CSS:

padre! > hijo
 

Sin embargo, esta funcionalidad aún no está disponible en los navegadores actuales, por lo que, mientras tanto, tendrás que hacerlo con JS.

Saludos