CSSで:checkedが効かない場合の対処法を解説!

CSSで使われる:checkedは、input要素などが入力(チェック)されている状態を表します。
しかし、:checkedを使用してもうまく効かないないときがあります。
今回はそういったCSSで:checkedが効かない問題の対処法について紹介します!

コンテンツ [表示]

  1. 1CSSで:checkedが効かない
  2. 2CSSで:checkedが効かない場合の対処法
  3. 2.1CSSでセレクタの指定が間違っている
  4. 2.2HTMLでinputとlabelが結びついていない
  5. 2.3ブラウザ側のバグ

CSSで:checkedが効かない

:checkedは、チェックボックスなどのinput要素や、オプションボタン(select要素の中のoption要素)がチェックされていたり、入力されている状態を表します。

主に他の要素のCSSと組み合わせて使われることが多く、下のサンプルコードのようにチェックボックスをチェックしたら他の要素の色が変化したりなどのデザインを作ることができます。

しかし、この:checkedを使用してもうまく反映されないときがあります。
今回はそういった:checkedが効かない問題の対処法について紹介します!

CSSで:checkedが効かない場合の対処法

:checkedが効かない原因となる事柄はいくつかあります。
まずはそれを絞り込むためにHTMLのinput要素に直接checkedをつけてスタイルが反映されるか試してみましょう。

直接checkedをつける

<input type="checkbox" name="checkbox" id="check1" checked>
<label for="check1">チェックしてください</label>

これで反映されない場合は、CSSが間違っている可能性が高く、反映される場合はHTMLが間違っている可能性が高いです。

CSSでセレクタの指定が間違っている

CSSの間違いで多いのが、セレクタの指定の間違いです。
まず1つ目は、:checkedの前にスペースが入ってしまっていることです。
以下のコードのようにinput:checkedの間にスペースがあると意味が変わってしまうため、入れてはいけません。

スペースが入ってしまっている

input :checked {
  
}

次に、そもそもinput以外に:checkedを指定してしまっていることです。
:checkedinput要素とoption要素にしか使うことができないため、a要素やbutton要素に使ってしまうと反映されません。

inputやselect以外には使えない

button:checked{

}

また、input以外の別の要素をへんかさせるもくてきで複数のセレクタを指定している場合、その指定方法が間違っている可能性があります。
以下の例では、「正しいCSS」では隣接セレクタを使用してinput要素と隣り合っているlabel要素を指定しています。
「間違ったCSS」では子セレクタを使用していますが、inputlabelの親要素ではないためこれでは反映されません。
このように、HTMLの構造とセレクタの指定方法が正しくなっているかを確認してみましょう。

HTML

<input type="checkbox" name="checkbox" id="check">
<label for="check">押してください</label>

正しいCSS

input:checked + label {
  color: red;
}

間違っているCSSの例

input:checked > label {
  color: red;
}

HTMLでinputとlabelが結びついていない

labelをクリックしたときにinputがきちんとcheckedになるためには、2つが結びついている必要があります。
元々は別の要素なので、結びつけるためにはそのための記述をする必要があります。
inputlabelを結びつけるには、以下のような方法があります。

  • idとforを使う
  • labelの中にinputを入れる

idとforを使う

idとforを使う

<input type="checkbox" name="checkbox" id="check1">
<label for="check1">チェックしてください</label>

input要素のid属性として指定した値をlabel要素のfor属性に入れる方法です。
ここで、2つに違う値を入れてしまったり、idとforを逆にしてしまったりするとうまく結びつきません。
また、idは同じ値を2つ以上使うことができないので、下のradioボタンのれいのように同じ値を別のinput要素で使用したりするとうまく動きません。

同じidを使うことはできない

<input type="radio" name="radio1" id="radio1">
<label for="radio1">選択してください</label>
<input type="radio" name="radio2" id="radio1">
<label for="radio1">選択してください</label>

labelの中にinputを入れる

labelの中にinputを入れる

<label>
  <input type="checkbox">クリックしてください
</label>

label要素の子要素としてinput要素を入れる方法です。
この場合は先にlabel要素を書き、それを親要素としてinput要素をその中に書きます。

この方法ではidもforも使わずにinputlabelを結びつけることができます。

ブラウザ側のバグ

上記の方法で解決しなかった場合は、ブラウザ側のバグの可能性があります。
ブラウザのバグでは、:checkedと2つ以上の隣接セレクター指定が効かないことがあります。

2つ以上の隣接セレクタがバグる

input[type="checkbox"]:checked + label + .title {
  color: red;
}

この場合は、隣接セレクタではなく間接セレクタを使うようにするとよいです。

間接セレクタを使う

input[type="checkbox"]:checked ~ .menu {
  color: red;
}

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

まゆ
ライター

まゆ

 主にHTML,Bootstrapの記事を描いています。