CSS3:checkedセレクタを使う

goto_jp 363views 更新:2014年1月20日

「checked」はチェックボックスとラジオボタンで使えるCSS3のセレクタです。

input[type=radio]:checked {
  ~
}

ラジオボタン単体だけへのスタイル指定ではあまり使い道がありませんが、下記のように隣接セレクタを使うと活きてきます。

.radio:checked + label {
  background: #cccccc;
}

HTMLは下記

<li><input type="radio" name="radio1" value="1" /><label>選択肢1</label></li>
<li><input type="radio" name="radio1" value="2" /><label>選択肢2</label></li>

CSSでの表示切り替えは:hoverがメジャーですが、CSS3から増えたセレクタを使うとまたバリエーションが増えていきます。<i class=”icon-cog”></i>

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません