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

U3
2020/7/6
2024/11/7

: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要素


コメント

コメントはまだありません。