img
白 クリーム 黄色 淡い緑 水色 淡い青紫 淡いグレー グレー 黒 茶 赤 濃いピンク ピンク

ラジオボタンの装飾


ラジオボタンを装飾する

  ie6 op8

スタイルを指定すると、ラジオボタンを装飾することができます。
(ブラウザ・バージョンによって見え方は異なり、また反映されない場合も有ります。)

■ ラジオボタンの装飾

 ←通常のラジオボタン    ←装飾したラジオボタン

<input type="radio" name="****" value="****" style="background-color:背景色名;border:数値px 枠の線種 枠の色名;">


枠に使用する線種は solid(実線)― dashed(点線)-- dotted(点線)・・ double(2重線)= など
(designtips テキストエリアの項を参照して下さい)

ラジオボタンは、複数の選択肢の中から1つだけ選んでもらう時に使う部品です。
nameはラジオボタンのコントロール名です。好きな名前を付けてください。
ラジオボタンを複数個で一組にして選択してもらう場合、同一nameを付けなければいけません。
valueはラジオボタンにチェックを入れた時の値です。
何がチェックされたのかをデータとして受け取る際に必要になります。


例:  a型  b型  o型 ←複数設置でひとつだけ選択
例: <input type="radio" name="a1" value="a" style="background-color:#ffcccc;border:1px dashed #ff99cc;">a型
   <input type="radio" name="a1" value="b" style="background-color:#ffcccc;border:1px dashed #ff99cc;">b型
   <input type="radio" name="a1" value="o" style="background-color:#ffcccc;border:1px dashed #ff99cc;">o型




■ 背景を画像にする

background-color:背景色; のかわりに background-image:url(背景画像); を入れてください。
<input type="radio" name="****" value="****" style="background-image:url(背景画像);border:数値px 枠線種 枠色名;">

例: 
例: <input type="radio" name="a2" value="aa" style="background-image:url(stripe.gif);border:1px solid #99ccff;">