【CSS】:checked　条件でスタイルを指定できる

:checked

ラジオボタン（<input type="radio">）、 チェックボックス（<input type="checkbox">）、 オプションボタン（<select> の中の <option>）要素がチェックされていたり on の状態

https://developer.mozilla.org/ja/docs/Web/CSS/:checked

div,
select {
  margin: 8px;
}

/* チェックが入った入力のラベル */
input:checked + label {
  color: red;
}

/* チェックが入ったラジオボタン */
input[type="radio"]:checked {
  box-shadow: 0 0 0 3px orange;
}

/* チェックが入ったチェックボックス */
input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px hotpink;
}

/* 選択されたオプション */
option:checked {
  box-shadow: 0 0 0 3px lime;
  color: red;
}

/* チェックボックスをチェックしたときに隠しコンテンツを表示 */
#expand-toggle:checked ~ * .expandable {
  visibility: visible;
}

E ~ F …… E要素の後ろにある同じ階層のF要素