2009年09月11日

ラジオボタン,チェックボックスをスタイルシートcss で装飾

スポンサード リンク


   ラジオボタン,チェックボックスを視覚的に分かりやすく、使いやすくしてみます。
ラジオボタン チェックボックス

ロリポップ!なら初心者でも安心!
ホームページ簡単作成 「ホムペロリ!」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます!!

サンプル

 ラジオボタン,チェックボックスのチェック欄をスタイルシートで装飾

表示例


CSS  HTML1
<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"> ラジオボタン1</label>
<input
type="radio" class="Input" name="ra1" value="ra2" id="rb2">
<label for="rb2" class="Lbl"> ラジオボタン2</label>
<input
type="radio" class="Input" name="ra1" value="ra3" id="rb3">
<label for="rb3" class="Lbl">ラジオボタン3</label>
</form>
<form>

<input
type="checkbox" class="Input1" name="ch1" value="ch1" checked id="cb1">
<label for="cb1" class="Lbl">チェックボックス1</label>
<input
type="checkbox" class="Input1" name="ch1" value="ch2" id="cb2">
<label for="cb2" class="Lbl">チェックボックス2</label>
<input
type="checkbox" class="Input1" name="ch1" value="ch3" id="cb3">
<label for="cb3" class="Lbl">チェックボックス3</label>
</form>

  <input 要素にクラス名を付けます。 ラジオボタンはclass="Input"
チェックボックスはclass="Input1"にしました。

/* borderoutline の幅4px、表示はoutset(立体的に隆起したように表示されます)
      色はred(赤色)です。borderoutlineの両方を設定しているのはブラウザによって
対応の仕方が違う為です。*/
  .Input {border : 4px outset red;
  outline : 4px outset red;
   }


/* borderoutline の幅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 で囲んでタイトルを付ける。

表示例
ラジオボタン

チェックボックス
CSS  HTML2
<fieldset>
<legend style="color : blue;">ラジオボタン</legend>
表示したい入力フォームのソースたとえば上のCSS HTML1の
<form>〜<form>
</fieldset>

 fieldsetタグで入力フォームを囲み legendタグでそのラベルを書きます。
ここでは<legend style="color : blue;">で文字色を青にしています。

  チェックボックスの方はfieldset style="background-color : #f2e6ff;"
背景色を変えています。

ラジオボタン HTML
チェックボックスのチェックできる数を制限し,入力不可にします。
チェックが入るとチェックボックスとラベル(文字)の背景色が変わります。
ツリーメニュー チェックボックスにチェックを入れるとメニューが展開

posted by javaScript at 20:39 | 大阪 ☁ | ラジオボタン | このブログの読者になる | 更新情報をチェックする

2009年09月10日

ラジオボタン html

スポンサード リンク

   ラジオボタンは複数の選択肢の中から1つだけを選択する場合に使います。
複数の選択肢を選択できるようにする場合は、
ラジオボタンの代わりにチェックボックスを使用します。

ロリポップ!なら初心者でも安心!
ホームページ簡単作成 「ホムペロリ!」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます!!

サンプル

リストマーク 通常のラジオボタン

表示例
ラジオボタン1 ラジオボタン2 ラジオボタン3
HTML
<input type="radio" name="ra" value="ra1" checked>ラジオボタン1
<input type="radio" name="ra" value="ra2">ラジオボタン2
<input type="radio" name="ra" value="ra3">ラジオボタン3

  <input type="" に radio を設定すると ラジオボタンが作成できます。
name 属性の値(ra) を同じにすることでラジオボタンのグループ化をおこない一つだけ
選択できるようにします。 checked属性を付けると最初から選択された状態になります。

リストマーク ラジオボタンの右横のテキスト(ラベル)でも選択できるようにする。

表示例
CSS  HTML
<style type="text/css">
<!--
/*ラベルにマウスが乗ったらカーソルの形状をポインタにします*/
a,label { cursor:pointer;
}
/*ラベルの装飾 下線を付けます*/

.Lbl {
border-bottom : 1px dashed gray;
}
-->
</style>

<input type="radio" name="ra1" value="ra1" checked id="rb1">
<label for="rb1" class="Lbl"> ラジオボタン1</label>
<input type="radio" name="ra1" value="ra2" id="rb2">
<label for="rb1" class="Lbl"> ラジオボタン2</label>

<label for="rb3" class="Lbl">
<input type="radio" name="ra1" value="ra3" id="rb3">
ラジオボタン3</label>

  ラジオボタンのよこに表示する文字列を<label....>文字列 </label>タグに置きます。
input要素のid属性の値 id = "rb1"、とlabel要素のfor属性の値 for="rb1"、を
同じにする ことでラベルも On/Off の選択が可能になります。

ラベルにマウスが乗ったらカーソルの形状を変えて 視覚的に解りやすく、しています。
<label for="rb3">........のように書くこともできます。

トグルスイッチ(0と1、trueとfalseを切り替え)条件分岐
チェックボックスのチェックできる数を制限し,入力不可にします。
チェックが入るとチェックボックスとラベル(文字)の背景色が変わります。
ツリーメニュー チェックボックスにチェックを入れるとメニューが展開

posted by javaScript at 16:52 | 大阪 ☁ | ラジオボタン | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。