［JS］チェックボックスやラジオボタンの見た目を変更する

Category ：
Javascript

チェックボックスやラジオボタンの見た目を変更する為のJavascriptがCRIR: Checkbox & Radio Input Replacementさんで配布、紹介されているので使い方を書いておく事にします。

…ここからが続き

使い方・ダウンロード

CRIR: Checkbox & Radio Input Replacementの一番下にある CRIR.zip (15kb) からダウンロードしてくる事が出来ます。

実行させたいチェックボックスやラジオボタンに.crirHiddenJSと指定する。
何も指定しなかったらデフォルトの状態になります。

チェックボックス

<label for="checkbox2">label内テキスト</label>
<input name="checkbox2" id="checkbox2" type="checkbox" value="true" class="crirHiddenJS" />

チェックボックス

<label for="checkbox3">label内テキスト　チェック済み</label>
<input name="checkbox3" id="checkbox3" type="checkbox" value="true" class="crirHiddenJS" checked="checked" />

checked="checked" と指定する。

ラジオボタン

チェックボックス

<label for="radio2">label内テキスト</label>
<input name="radio_group" id="radio2" type="radio" value="true" class="crirHiddenJS" />

チェックボックス

<label for="radio3">label内テキスト　チャック済み</label>
<input name="radio_group" id="radio3" type="radio" value="true" class="crirHiddenJS" checked="checked" />

checked="checked" と指定する。

スクリプト実行後のスタイル

/* ----------------------- 共通要素  */
label.checkbox_checked,
label.checkbox_unchecked,
label.radio_checked,
label.radio_unchecked	{
	display: block;
	margin: 10px 0;
	padding-left: 25px;
}
/* ----------------------- チェックボックス  */
label.checkbox_checked {
	background: #FFF url(image/tick.png) no-repeat;	
}
label.checkbox_unchecked  {
	background: #FFF url(image/cross.png) no-repeat;	
}

/* ----------------------- ラジオボタン  */
label.radio_checked {
	background: #FFF url(image/bullet_green.png) no-repeat;	
}
label.radio_unchecked  {
	background: #FFF url(image/bullet_white.png) no-repeat;	
}

/* ----------------------- ホバー後の要素  */
label:hover{
	color: #999;
	cursor:pointer;
}

/* ----------------------- スクリプト実行後デフォルトのチェックボックスやラジオボタンを飛ばす為の要素 */
.crirHidden {
	position: absolute;
	left: -9999px;
}

Comments