ラジオボタン,チェックボックスを視覚的に分かりやすく、使いやすくしてみます。
ラジオボタン チェックボックス
ロリポップ！なら初心者でも安心！
ホームページ簡単作成 「ホムペロリ！」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます！！
サンプル
ラジオボタン,チェックボックスのチェック欄をスタイルシートで装飾
<style type="text/css">
<!--
.Input{border : 4px outset red;
outline : 4px outset red;}
.Input1{border : 3px inset yellow;
outline : 3px inset yellow;}
.Lbl:hover{ cursor:pointer;color : red;}
.Lbl{ border-bottom : 1px dashed gray;}
-->
</style>
<form>
<input type="radio" class="Input" name="ra1" value="ra1" checked id="rb1">
<label for="rb1" class="Lbl"> ラジオボタン１</label>
<input type="radio" class="Input" name="ra1" value="ra2" id="rb2">
<label for="rb2" class="Lbl"> ラジオボタン２</label>
<input type="radio" class="Input" name="ra1" value="ra3" id="rb3">
<label for="rb3" class="Lbl">ラジオボタン３</label>
</form>
<form>
<input type="checkbox" class="Input1" name="ch1" value="ch1" checked id="cb1">
<label for="cb1" class="Lbl">チェックボックス１</label>
<input type="checkbox" class="Input1" name="ch1" value="ch2" id="cb2">
<label for="cb2" class="Lbl">チェックボックス２</label>
<input type="checkbox" class="Input1" name="ch1" value="ch3" id="cb3">
<label for="cb3" class="Lbl">チェックボックス３</label>
</form> <input 要素にクラス名を付けます。 ラジオボタンはclass="Input"
チェックボックスはclass="Input1"にしました。
/* border、outline の幅4px、表示はoutset(立体的に隆起したように表示されます)
色はred(赤色)です。border、outlineの両方を設定しているのはブラウザによって
対応の仕方が違う為です。*/
.Input {border : 4px outset red;
outline : 4px outset red;
}
/* border、outline の幅4px、表示はinset(立体的に窪んだように表示されます)
色はred(赤色)です。*/
.Input1{border : 3px inset yellow;
outline : 3px inset yellow;
}
/*ラベルにマウスが乗ったらカーソルの形状をポインタにし
文字色を赤にします*/
.Lbl:hover{ cursor:pointer;
color : red;
}
/*ラベルの装飾 下線を付けます*/
.Lbl {
border-bottom : 1px dashed gray;
}
<form>〜</form>
それぞれの入力フォームを fieldset で囲んでタイトルを付ける。
<fieldset>
<legend style="color : blue;">ラジオボタン</legend>
表示したい入力フォームのソースたとえば上のCSS HTML１の
<form>〜<form>
</fieldset> fieldsetタグで入力フォームを囲み legendタグでそのラベルを書きます。
ここでは<legend style="color :
blue;">で文字色を青にしています。
チェックボックスの方はfieldset style="background-color : #f2e6ff;"で
背景色を変えています。
ラジオボタン HTML
チェックボックスのチェックできる数を制限し,入力不可にします。
チェックが入るとチェックボックスとラベル(文字)の背景色が変わります。
ツリーメニュー チェックボックスにチェックを入れるとメニューが展開
