CSS: cambiar el padre en el enfoque del niño

Solución:

Ahora puede hacer esto en CSS puro, por lo que no se necesita JavaScript

La nueva pseudoclase CSS :focus-within ayudaría en casos como este y ayudará con la accesibilidad cuando las personas usen tabulaciones para navegar, algo común cuando se usan lectores de pantalla.

.parent:focus-within {
  border: 1px solid #000;
}

La pseudoclase: focus-within coincide con elementos que coinciden con: focus o que tienen descendientes que coinciden con: focus.

---

Puedo usar…

Puede comprobar qué navegadores admiten esto visitando http://caniuse.com/#search=focus-within

---

Manifestación

fieldset {
  padding: 0 24px 24px !important;
}

fieldset legend {
  opacity: 0;
  padding: 0 8px;
  width: auto;
}

fieldset:focus-within {
  border: 1px solid #000;
}

fieldset:focus-within legend {
  opacity: 1;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <form>
    <fieldset>
      <legend>Parent Element</legend>
      <div class="form-group">
        <label for="name">Name:</label>
        <input class="form-control" id="name" placeholder="Enter name">
      </div>
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
    </fieldset>
  </form>
</div>

No hay posibilidad de cómo hacer eso con CSS. CSS solo puede aplicar estilos a hermanos, hijos, etc., no a padres.

Puede usar simplemente JS así:

<style>
.parent {background: green}
.focused {background: red;}
</style>
<div class="parent">
    <input class="childInput" type="text" />
    <div class="sibling"></div>
</div>

<script>
$('.parent > *')
    .focus(function() {
        $('.parent').addClass('focused');
    })
    .blur(function() {
        $('.parent').removeClass('focused');
    });
</script>

http://jsfiddle.net/C4bZ6/

Este código toma a todos los hijos directos de .parent y si enfocas uno de ellos, clase focused se agrega al padre. En desenfoque, esta clase se elimina.

---

---

Utiliza Nuestro Buscador