CSS3　UI要素状態擬似クラス　:disabled、:checkedの確認です。checkのオンオフが適用される対象としては、inputタイプのcheckboxやradioがあります。今回は、disabledの適用を考慮してcheckboxで試すことにしましたが、checkboxに限らずformに使う部品はブラウザ毎のデザインの違いが大きいので、一度ブラウザ固有のデザインを消して、CSSで再構築しています。

サンプルは、企業などの本店、支店を選ぶcheckboxになっています。本店は必ず選択（最初からチェック　checked）、変更不可（チェックを外せない　disabled）になり、東京は工事中ということで、利用不可（チェックできない　disabled）。他はチェックのオンオフ可能という設定にしています。

サンプル

 

サンプルのhtmlソース

 <div class="wrap">
    <input type="checkbox" name="check" value="本店" id="honten" checked disabled>
    <label for="honten" class="sample">本店</label>
    <input type="checkbox" name="check" value="東京支店" id="tokyo" disabled>
    <label for="tokyo" class="sample">東京支店</label>　
    <input type="checkbox" name="check" value="大阪支店" id="osaka">
    <label for="osaka" class="sample">大阪支店</label>　
    <input type="checkbox" name="check" value="名古屋支店" id="nagoya">
    <label for="nagoya" class="sample">名古屋支店</label>　
    <input type="checkbox" name="check" value="福岡支店" id="hukuoka">
    <label for="hukuoka" class="sample">福岡支店</label>　
 </div>

サンプルのCSSソース（ブラウザ固有のデザインを消す）

input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	}

サンプルのCSSソース（checkboxの再構築部分）

.sample {
	position: relative;
	display: inline-block;
	padding: 0 0 0 42px;
	vertical-align: middle;
	cursor: pointer;
	color:#222;
	}
.sample:hover:after {
	border-color: #0171bd;
	}
.sample:after {
	position: absolute;
	top: 50%;
	left: 15px;
	display: block;
	margin-top: -10px;
	width: 16px;
	height: 16px;
	border: 2px solid #aaa;
	border-radius: 6px;
	content: '';
	}
.sample:before {
	position: absolute;
	top: 50%;
	left: 21px;
	display: block;
	margin-top: -7px;
	width: 5px;
	height: 9px;
	border-right: 3px solid #0171bd;
	border-bottom: 3px solid #0171bd;
	content: '';
	opacity: 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	}

サンプルのCSSソース（:disabled、:checkedの適用部分）

/*チェックされた（:checked）ときにチェック文字の色を透明度100%で表示*/
	input[type=checkbox]:checked + .sample:before {
	opacity: 1;
	}
/*チェックされかつ操作不可（:disabled）のチェック文字の色を透明度50%で表示*/
	input[type=checkbox]:checked:disabled + .sample:before {
	opacity: 0.5;
	}
/*操作不可のテキストの色を薄い#999で表示。操作不可のhover時のカーソルを標準にする。*/
	input[type=checkbox]:disabled + .sample {
	color:#999;
	cursor: default;
	}
/*操作不可のチェック文字を囲むボーダーの色を薄い#aaaで表示*/	
	input[type=checkbox]:disabled + .sample:after{
	border-color: #aaa;
	}