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になるためには、2つが結びついている必要があります。
元々は別の要素なので、結びつけるためにはそのための記述をする必要があります。
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;
}
