jquery.screwdefaultbuttons:ラジオボタンやチェックボックスをカスタム表示するJs



ラジオボタンやチェックボックスをカスタムしたデザイン画像で表示してみます。
(でもまぁ、個人的にはデフォルトのものでイイじゃんって常々思うんですが)

1.読込むJsとJavaScriptの記述例

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.screwdefaultbuttonsV2.js"></script>

<script type="text/javascript">
$(function(){
	$('input:radio').screwDefaultButtons({
		image: 'url("images/radioSmall.jpg")',
		width: 43,
		height: 43
	});
	
	$('input:checkbox').screwDefaultButtons({
		image: 'url("images/checkboxSmall.jpg")',
		width: 43,
		height: 43
	});

});
</script>

2.CSSの記述例

以下色々変更してみて下さい。

<style type="text/css" media="all">
<!--
body{
	margin: 0;
	min-width: 980px;
	padding: 0;
}
h1{
	text-align:center;
}
.styledRadio, .styledCheckbox {
	display: inline-block;
}
.example {
	padding: 50px 0 0 20px;
}
label {
	line-height: 43px;
	font-size: 20px;
	vertical-align: 14px;
	padding-right: 20px;
}
button{
	display: block;
}
-->
</style>

3.HTMLの記述例

	<div class="example">
		<h2>カスタムされたラジオボタン</h2>
		<input type="radio" name="ex1" id="ex1_a">
		<label for="ex1_a">ラジオA</label>
		<input type="radio" name="ex1" id="ex1_b">
		<label for="ex1_b">ラジオB</label>
	</div>
	
	<div class="example">
		<h2>カスタムされたチェックボックス</h2>
		<input type="checkbox" name="ex2_a" id="ex2_a">
		<label for="ex2_a">チェックA</label>
		<input type="checkbox" name="ex2_b" id="ex2_b">
		<label for="ex2_b">チェックB</label>
	</div>
	
	<div class="example">
		<h2>デフォルトチェック済み(Checked)ラジオボタンとチェックボックス</h2>
		<input type="radio" name="ex3_a" checked="checked">
		<input type="checkbox" name="ex3_b" checked="checked">
	</div>
	
	<div class="example">
		<h2>デフォルト無効(Disabled)ラジオボタンとチェックボックス</h2>
		<input type="radio" name="ex4_a" disabled="disabled">
		<input type="checkbox" name="ex4_b" disabled="disabled">
	</div>

jquery.screwdefaultbuttons:ラジオボタンやチェックボックスをカスタムされた画像として表示するデモページ

ソース元:Screw Default Buttons | Custom Radio Buttons and CheckBoxes

過去に紹介した
JQUERY.TINYSCROLLBAR:カスタムスクロールバーを表示するJS

JQUERY.JSCROLLPANE.MIN.JS:スクロールバーをカスタムするJS
もそうですが、気持ちはわかるんですが
こちらの気持ちとしては何度も言いますが
デフォルトでイイじゃん!って思います。