CSSの:checkedでチェックされた要素にスタイルを適用する方法をわかりやすく解説

2024.09.13
スポンサーリンク

:checkedは、チェックボックスやラジオボタンのようなフォーム要素がチェックされた状態を選択する擬似クラスです。このクラスを使用することで、チェックされた要素に対して特定のスタイルを適用できます。

スポンサーリンク

:checkedの値とその効果の一覧

  • background-color: チェックされたときに、背景色が変更されます。
  • border: チェックされたときに、枠線が変更されます。
  • color: チェックされたときに、文字色が変更されます。

注意点と関連情報

:checkedは、チェックボックス、ラジオボタン、またはoption要素（選択リスト）のみに適用されます。選択状態が変わったときに視覚的な変化を与えるのに適しています。また、:checked擬似クラスでチェックされた要素に対してスタイルを適用するときは、その要素とラベルを組み合わせて使用するとわかりやすいレイアウトが可能です。

:checkedが効かない理由として考えられること

対象の要素がラジオボタンやチェックボックスでない

:checkedは<input type="radio">や<input type="checkbox">など、選択可能なフォーム要素にのみ適用されます。これら以外の要素には効果がありません。
対策：<input type="radio">や<input type="checkbox">などのフォーム要素が使用されているか確認します。フォーム以外の要素に対しては、他の擬似クラスやJavaScriptを使用して制御します。

共通するCSSコード

.css-sample-container {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
  margin-bottom: 30px;
}

.css-sample-box {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  padding: 10px;
}

:checkedで背景色を変更

チェックされたときに、背景色が黄色に変わる例です。

HTMLコード

<div class="css-sample-container">
  <input type="checkbox" id="background-checkbox" class="checked-background">
  <label for="background-checkbox" class="css-sample-box">このチェックボックスをクリックすると、背景色が黄色に変わります。</label>
</div>

CSSコード

.checked-background:checked ~ label.css-sample-box {
  background-color: yellow;
}

※~は、弟要素(同深度の要素)を指定する方法です。

表示結果

:checkedで枠線を変更

チェックされたときに、枠線の色が青色に変わる例です。

HTMLコード

<div class="css-sample-container">
  <input type="checkbox" id="border-checkbox" class="checked-border">
  <label for="border-checkbox" class="css-sample-box">このチェックボックスをクリックすると、枠線が青色に変わります。</label>
</div>

CSSコード

.checked-border:checked ~ label.css-sample-box {
  border: 2px solid blue;
}

表示結果

:checkedで文字色を変更

チェックされたときに、文字色が緑色に変わる例です。

HTMLコード

<div class="css-sample-container">
  <input type="checkbox" id="text-checkbox" class="checked-text">
  <label for="text-checkbox" class="css-sample-box">このチェックボックスをクリックすると、文字色が緑色に変わります。
  </label>
</div>

CSSコード

.checked-text:checked ~ label.css-sample-box {
  color: green;
}

表示結果

まとめ

  • :checkedは、チェックボックスやラジオボタンが選択された状態でスタイルを適用するために使用します。
  • 背景色や枠線、文字色の変更など、ユーザーの選択状態に応じて視覚的なフィードバックを提供することができます。
  • labelタグと組み合わせて、使いやすいインターフェースを作成することが推奨されます。
スポンサーリンク