CSSで:checkedが効かない場合の対処法を解説！
CSSで使われる:checkedは、input要素などが入力（チェック）されている状態を表します。
しかし、:checkedを使用してもうまく効かないないときがあります。
今回はそういったCSSで:checkedが効かない問題の対処法について紹介します！
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を指定してしまっていることです。
:checkedはinput要素とoption要素にしか使うことができないため、a要素やbutton要素に使ってしまうと反映されません。
inputやselect以外には使えない
button:checked{
}また、input以外の別の要素をへんかさせるもくてきで複数のセレクタを指定している場合、その指定方法が間違っている可能性があります。
以下の例では、「正しいCSS」では隣接セレクタを使用してinput要素と隣り合っているlabel要素を指定しています。
「間違ったCSS」では子セレクタを使用していますが、inputはlabelの親要素ではないためこれでは反映されません。
このように、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になるためには、２つが結びついている必要があります。
元々は別の要素なので、結びつけるためにはそのための記述をする必要があります。
inputとlabelを結びつけるには、以下のような方法があります。
- 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要素をその中に書きます。
inputとlabelを結びつけることができます。ブラウザ側のバグ
上記の方法で解決しなかった場合は、ブラウザ側のバグの可能性があります。
ブラウザのバグでは、:checkedと2つ以上の隣接セレクター指定が効かないことがあります。
2つ以上の隣接セレクタがバグる
input[type="checkbox"]:checked + label + .title {
color: red;
}この場合は、隣接セレクタではなく間接セレクタを使うようにするとよいです。
間接セレクタを使う
input[type="checkbox"]:checked ~ .menu {
color: red;
}
