Eine kurze Diskussion über den Spaß von :focus-within in CSS

<div Klasse="ctn">
   
  <div Klasse="xPassword">
    <input type="password" placeholder="Bitte geben Sie Ihr Passwort ein" class="input">
    <img src="http://suo.im/5UnnjN" alt=""> 
  </div>
    
  <img src="http://r6m.cn/csAC" alt=""> 
    
</div>

.ctn {
     Position: relativ;
    Breite: 318px;
    Rand: 100px automatisch;
    Höhe: 370px;
    Polsterung: 20px;
    Box-Größe: Rahmenbox;
    Hintergrund: #fff;
    Z-Index: 10;
    Kastenschatten: 0 0 15px #cfcfcf;
    
}
.ctn h2 {
  Schriftgröße: 20px;
  Schriftstärke: fett;
  Rand unten: 30px;
}
.ctn Eingabe {
  Polsterung: 10px;
  Breite: 100 %;
  Rand: 1px durchgezogen #e9e9e9;
  Rahmenradius: 2px;
  Gliederung: keine;
  Box-Größe: Rahmenbox;
  Schriftgröße: 16px;
}
img {
    Position: absolut;
    oben: -23%;
    links: 50%;
    Breite: 80px;
    Höhe: automatisch;
    transformieren: übersetzen(-50 %, 0);
}

.xPassword img {
  Anzeige: keine;
  Breite: 103px;
  Höhe: automatisch;
  oben: -26%;
}

//Die obigen Punkte sind wertlos und können ignoriert werden. Die folgenden zwei sind die wichtigsten Punkte. xPassword:focus-within ~ img {
  Anzeige: keine;
}

.xPassword:Fokus innerhalb von img {
  Anzeige: Block;
}