CSS3:checkedセレクタを使う

「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>