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

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

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

demo page

…ここからが続き

使い方・ダウンロード

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

サムエル

サムエル

助かりました。

2010年11月10日 22:04

MIYA

MIYA

自分の環境化では(table)の中に配置しても問題なく動作はしているんですよね…
何か他の要素が原因とは考えられないでしょうか?

2009年08月30日 15:43

とおりすがり

とおりすがり

これ、オブジェクトを表(table)の中に配置すると使えないようですね。

2009年08月29日 16:35

MIYA

MIYA

これは酷い脱字…

修正しておきました。
教えて頂きありがとうございます^^

2009年06月09日 15:19

通りすがり

通りすがり

チェックがチャックになってるところに脱力してしまうので修正をー

2009年06月09日 13:34

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article