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

2020年10月14日

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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コード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
/* チェックがONの場合checkbox */
input[type="checkbox"]:checked {
   box-sizing: border-box;
cursor: pointer;
}
/* オプションのチェックがONの場合 */
option:checked {
color: red;
}
/* チェックがONの場合checkbox */ input[type="checkbox"]:checked {    box-sizing: border-box; cursor: pointer; } /* オプションのチェックがONの場合 */ option:checked { color: red; }
/* チェックがONの場合checkbox */
input[type="checkbox"]:checked {
   box-sizing: border-box;
    cursor: pointer;
}
/* オプションのチェックがONの場合 */
option:checked {
  color: red;
}

 

CSS

Posted by arkgame