参照：Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements
ラジオボタン、チェックボックス、セレクトメニューの見た目をカスタマイズ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css">
<!-- JS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script src="/content/lib/jquery/custom-form-elements.js" ></script>
<!-- CSS -->
<style type="text/css">
.checkbox, .radio {
width:19px; height:25px;
padding:0 5px 0 0;
background:transparent url("/content/img/ajax/checkbox.png") no-repeat 0 0;
display:block;
clear:left;
float:left;
}
.radio {
background:transparent url("/content/img/ajax/radio.png") no-repeat 0 0;
}
.select {
position:absolute;
/* With the padding included, the width is 190 pixels:the actual width of the image. */
width:158px; height:21px;
padding:0 24px 0 8px;
color:#fff;
background:url("/content/img/ajax/select.gif") no-repeat;
overflow:hidden;
}
label {
display:block;
margin:10px 0;
}
#frm p {
width:150px;
float:left;
margin:0 0 10px 0;
}
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<!-- CONTENT -->
<p>参照：<a href='http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/'>Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements</a></p>
<p>ラジオボタン、チェックボックス、セレクトメニューの見た目をカスタマイズ</p>
<div id="res">
<!-- CODE -->
<form action="/content/demo/test.php" method="get" id="frm">
<div class="cf">
<p>
<label for="c1"><input type="checkbox" name="c1" value="1" class="styled" checked="checked">選択肢1</label>
<label for="c2"><input type="checkbox" name="c2" value="2" class="styled">選択肢2</label>
<label for="c3"><input type="checkbox" name="c3" value="3" class="styled">選択肢3</label>
</p>
<p>
<label for="r1"><input type="radio" name="r" id="r1" value="yes" class="styled"> はい</label>
<label for="r2"><input type="radio" name="r" id="r2" value="no" class="styled" checked="checked"> いいえ</label>
</p>
<p>
<select name="d" class="styled">
<option value="0">選択してください</option>
<option value="1">Option 1</option>
<option value="2" selected="selected">Option 2</option>
<option value="3">Option 3</option>
</select>
</p>
</div>
<p><input type="submit" value="送信"></p>
</form>
<!-- / CODE -->
</div>
<!-- / CONTENT -->
</body>
</html>