≪ Today I learned. RSS購読
公開日
タグ
CSS
著者
ダーシノ(@bc_rikko)

フォーカスがあたったinputに紐づくlabelを強調する

:focus-withinを使うと、その要素、または子要素にフォーカスが当たったときにスタイルを当てられる。

<form>
  <div class="field">
    <label for="one">One</label>
    <input id="one">
  </div>
  <div class="field">
    <label for="two">Two</label>
    <input id="two">
  </div>
</form>
/* いったん親要素:focus-withinからlabelにたどって変更する*/
.field:focus-within label {
  font-weight: bold;
}

/* 他の方法: すぐとなりにフォーカスがあたったinput要素があるときにlabelのスタイルを変更する  */
label:has(+ input:focus) {
  font-weight: bold;
}

デモ