「CSS」要素がチェックon状態で:checkedを定義するサンプル

2014年2月10日2020年10月14日

説明
:checked はラジオボタン、チェックボックス、オプションボタンの
中の要素がチェックされる場合cssを表示します。
htmlコード

<div>
  <input type="checkbox" name="itemChk" id="itemId">
  <label for="itemId">項目チェック</label>
</div>
<select name="city" id="cityID">
  <option value="1001">A001</option>
  <option value="2002">B002</option>
  <option value="3003">C003</option>
</select>

CSSコード

/* チェックがONの場合checkbox */
input[type="checkbox"]:checked {
　　　box-sizing: border-box;
    cursor: pointer;
}
/* オプションのチェックがONの場合 */
option:checked {
  color: red;
}