トップページの中の セレクタの中の UI要素状態擬似クラス (E:checked)

UI要素状態擬似クラス (E:checked)

  • 最終更新:2009年7月 7日 13:09

CSS3で定義された、UI要素状態擬似クラスのパターンE:checkedは、ラジオボタンやチェックボックスがチェックされた時に適用されるセレクタです。

対応ブラウザ
  • IE6未対応
  • IE7未対応
  • IE8未対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

UI要素状態擬似クラスのサンプル

input[type="checkbox"] {
  margin-right: 5px;
}

input[type="checkbox"]:checked {
  margin-right: 10px;
}
<p>
<input type="checkbox" id="checkboxExample" name="hoge" value="1" />
<label for="checkboxExample"> チェックボックス</label>
</p>

チェックボックスにスタイルを指定しても殆ど適用されないので、こんなんですみません。

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

チェックを付けると、5pxテキストが動くのが確認できます。
実用的に使う場合、:checkedも、JSなどと組み合わせて使う感じになると思われます。

  • CSS HappyLife
  • underHat
著書(全て共著)

このページの上部へ