:enabled【使用可能要素】疑似クラス
:disabled【使用不可要素】疑似クラス
:checked【チェック状態要素】疑似クラス
:indeterminate【不確定状態要素】疑似クラス

メモ 外部リンク 構文 例

メモ

  • ユーザインタフェース関連の疑似クラス
  • :indeterminate【不確定状態要素】疑似クラス は将来のサポートとして定義
    (不確定状態は、JavaScript で設定)
  • 要素については、HTML5 リファレンス メモ 参照

構文

構文説明備考
E:enabled  { スタイル定義 } 使用可能なE要素に適用
E:disabled  { スタイル定義 } 使用不可なE要素に適用
E:checked  { スタイル定義 } チェック状態のE要素に適用 下記の要素が対象
・チェックボックス：type属性が"checkbox"の<input>【汎用入力コントロール】
・ラジオボタン：type属性が"radio"の<input>【汎用入力コントロール】
・選択リストの選択項目：<select>【選択リスト】 内の <option>【選択リストの選択項目】
E:indeterminate  { スタイル定義 } 不確定状態のE要素に適用

例

<head>
・・・
<script>
function onLoad() {
  document.getElementById("ck").indeterminate = true;
  document.getElementById("rd").indeterminate = true;
}
</script>
</head>

<body onload="onLoad();">
・・・

<style>
.ex-text:enabled { background-color: lightcyan; }
.ex-text:disabled { background-color: lightgray; }
.ex:checked { outline: red solid 2px; }
.ex2 option:checked { border: 2px red solid; }
.ex:indeterminate { outline: blue solid 2px; }
</style>

<input class="ex-text" type="text" value="入力可能">
<input class="ex-text" type="text" disabled value="入力不可"><br>

<label><input class="ex" type="checkbox" checked>チェックボックス</label>
<label><input class="ex" type="checkbox">チェックボックス</label>
<label><input class="ex" type="checkbox" id="ck">チェックボックス</label><br>

<label><input class="ex" type="radio" name="radio" checked>ラジオボタン</label>
<label><input class="ex" type="radio" name="radio">ラジオボタン</label>
<label><input class="ex" type="radio" name="radio" id="rd">ラジオボタン</label><br>

<select class="ex2" size="5" multiple>
  <option>項目
  <option selected>項目
  <option>項目
  <option selected>項目
  <option>項目
</select>