CSS の :focus-within の楽しさについて簡単に説明します

<div class="ctn">
   
  <div class="xPassword">
    <input type="password" placeholder="パスワードを入力してください" class="input">
    <img src="http://suo.im/5UnnjN" alt=""> 
  </div>
    
  <img src="http://r6m.cn/csAC" alt=""> 
    
</div>

.ctn {
     位置: 相対的;
    幅: 318ピクセル;
    マージン: 100px 自動;
    高さ: 370ピクセル;
    パディング: 20px;
    ボックスのサイズ: 境界線ボックス;
    背景: #fff;
    zインデックス: 10;
    ボックスシャドウ: 0 0 15px #cfcfcf;
    
}
.ctn h2 {
  フォントサイズ: 20px;
  フォントの太さ: 太字;
  下部マージン: 30px;
}
.ctn 入力 {
  パディング: 10px;
  幅: 100%;
  境界線: 1px 実線 #e9e9e9;
  境界線の半径: 2px;
  アウトライン: なし;
  ボックスのサイズ: 境界線ボックス;
  フォントサイズ: 16px;
}
画像 {
    位置: 絶対;
    上位: -23%;
    左: 50%;
    幅: 80ピクセル;
    高さ: 自動;
    変換: translate(-50%, 0);
}

.xパスワード画像{
  表示: なし;
  幅: 103px;
  高さ: 自動;
  最高: -26%;
}

//上記は無価値なので無視して構いません。次の2つが重要なポイントです。xPassword:focus-within ~ img {
  表示: なし;
}

.xPassword:フォーカス内画像{
  表示: ブロック;
}