ラジオボタンと複数選択ボタンは画像を使用してスタイル設定されます

ラジオボタンや複数選択ボタンにスタイルを追加する方法や、ボタンを大きくする方法を尋ねる人を以前見かけました。以下に私が作成した例を共有します。

1.まずボタンを画像にする

2.htmlページ

コードをコピー

コードは次のとおりです。

<!DOCTYPE HTML>
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(関数(){
$("input[type='checkbox']").click(function(){
if($(this).is(':checked')){
$(this).attr("チェック済み","チェック済み");
$(this).parent().removeClass("c_off").addClass("c_on");
}それ以外{
$(this).removeAttr("チェック済み");
$(this).parent().removeClass("c_on").addClass("c_off");
}
});
$("input[type='radio']").click(function(){
$("input[type='radio']").removeAttr("チェック済み");
$(this).attr("チェック済み","チェック済み");
$(this).parent().removeClass("r_off").addClass("r_on").siblings().removeClass("r_on").addClass("r_off");
});
});
</スクリプト>
</head>
<スタイル>
/*複数選択/単一選択*/
ラベル {
表示: ブロック;
カーソル: ポインタ;
行の高さ: 26px;
下マージン: 20px;
幅: 26px;
高さ: 26px;
行の高さ: 26px;
フロート: 左;
上マージン: 6px;
}
.ラジオ {
パディング上部: 18px;
上境界線: 1px 実線 #049CDB;
}
.label_check 入力、.label_radio 入力 {
右マージン: 5px;
}
.lblby .label_check、.lblby .label_radio {
右マージン: 8px;
}
.lblby .label_radio、.lblby .label_check {
背景: url(../images/jxc_btn.png) 繰り返しなし;
}
.lblby .label_check {
背景位置: 0 0px
}
.lblby ラベル.c_on {
背景位置: 0 -26px;
}
.lblby .label_radio {
背景位置: 0 -52px;
}
.lblby ラベル.r_on {
背景位置: 0 -78px;
}
.lblby .label_check 入力、.lblby .label_radio 入力 {
位置: 絶対;
左: -9999px;
}
</スタイル>
<body class="lblby">
<label for="チェックボックス-01" class="label_check c_on">
<input type="checkbox" check="checked" value="1" id="checkbox-01" name="sample-checkbox-01" />
チェックボックス1 </label>
<label for="チェックボックス-02" class="label_check">
<input type="チェックボックス" 値="1" id="チェックボックス-02" 名前="サンプルチェックボックス-02" />
チェックボックス2</label>
<label for="radio-01" class="label_radio r_on">
<input type="radio" value="1" check="checked" id="radio-01" name="sample-radio" />
ラジオ1 </label>
<label for="radio-02" class="label_radio r_off">
<input type="radio" value="1" id="radio-02" name="sample-radio" />
ラジオ2 </label>
<label for="radio-03" class="label_radio r_off">
<input type="radio" value="1" id="radio-03" name="sample-radio" />
ラジオ3 </label>
</本文>
</html>

<<: ブラウザが登録できるイベントの概要

>>: JavaScript プログラムのループ構造の詳細な説明