チェックされている要素のスタイル設定する - Checked疑似クラス - CSS

Checked疑似クラスを用いてチェックされている要素のスタイルを設定するコードを紹介します。

例1

コード

以下のコードを記述します。

CheckedSelector.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <link rel="stylesheet" type="text/css" href="CheckedSelector.css" />
</head>
<body>
  <input id="CheckBox" class="chkbox" type="checkbox" />
  <label for="CheckBox">チェックボックスです</label>
</body>
</html>

CheckedSelector.css

input.chkbox{
  background-color:#b6ff00;
}

input.chkbox:checked{
  background-color:#ff6a00;
}

解説

"input.chkbox"にてchkboxクラスのinputタグの要素のスタイルを設定できます。上記のコードでは背景色を黄緑色に設定しています。
"input.chkbox:checked"にてチェックボックスがチェックされた状態のchkboxクラスのinputタグの要素のスタイルを設定しています。上記のコードでは背景色をオレンジに変更しています。

実行結果

HTMLファイルを表示します。下図の画面が表示されます。チェックボックスがチェックされていない状態では背景色が黄緑色になっています。

チェックボックスにチェックをつけるとチェックボックスの背景色がオレンジに変化します。

例2

コード

以下のコードを記述します。

CheckedSelector.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <link rel="stylesheet" type="text/css" href="CheckedSelector.css" />
</head>
<body>
  <input id="CheckBox1" class="checkbox" type="checkbox" />
  <label for="CheckBox1">チェックボックスです</label>
</body>
</html>

CheckedSelector.css

input.checkbox + label {
  color:#008000;
}

input.checkbox:checked + label {
  color:#000080;
  text-decoration:underline;
}

解説

"input.checkbox + label"にて"checkbox"クラスのinputタグに隣接するlabelタグのスタイルを設定できます"+"は隣接セレクターです。隣接セレクターの詳細についてはこちらの記事を参照してください。

"input.checkbox:checked + label"にてチェックボックスがチェックされた場合の "checkbox"のクラスのinputタグに隣接するlabelタグのスタイルを設定できます。

実行結果

HTMLファイルを表示します。下図の画面が表示されます。チェックボックスがチェックされていない状態ではラベルは緑色です。

チェックボックスにチェックをつけるとラベルのスタイルが変化します。文字色が青になり下線が付きます。

Checked疑似クラスを用いてチェック状態と未チェック状態のスタイルを変更することができました。

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

目次

チェックされている要素のスタイル設定する - Checked疑似クラス - CSS

例1

コード

CheckedSelector.html

CheckedSelector.css

解説

実行結果

例2

コード

CheckedSelector.html

CheckedSelector.css

解説

実行結果

関連するページ