◆HTML：ボタン型のラジオボタン

デフォルトのラジオボタン:
   水素 ヘリウム 酸素 マグネシウム

ボタン型ラジオボタン:
   水素 ヘリウム 酸素 マグネシウム

自照式ボタン型ラジオボタン：
   水素 ヘリウム 酸素 マグネシウム

   水素 ヘリウム 酸素 マグネシウム

   水素 ヘリウム 酸素 マグネシウム

   水素 ヘリウム 酸素 マグネシウム

   水素 ヘリウム 酸素 マグネシウム

   水素 ヘリウム 酸素 マグネシウム

 ボタン形のラジオボタンを定義する

ボタン型のラジオボタンをCSSとボタン用のgifデータで作成します。

冒頭のボタン型ラジオボタンはBRクラスとして次のCSSで定義されています。

<style>
input.BR {
   display: none;         /* デフォルトのポッチを消す */
   }
label.BR {
   background-image:url("./button_pattern_b.gif");
   color:white;           /* 文字色 */
   border:solid 3px;      /* 枠線の幅 */
   border-color:#4499ff #0000ff #000077 #0070ff;/* 上右下左の色　*/
   padding: 0.05em 0.75em;/* 文字上下左右の余裕 */
   display:inline-block;  /* これが無いとwidth指定ができない */
   text-align: center;    /* 文字は中央に配置 */
   }
input.BR:checked + label {
   background-image:url("./button_pattern_r.gif");
   border:solid 3px;
   border-color:#ff0000 #ff8888 #ff0000 #ff8888;
   }
</style>

gif画像は2×25ドットで次のようになっています。

gifファイルとPhotoShopファイルを次の場所に置きました。
 button_patterns.zip

 使い方

<input>と<label>でBRクラスを参照します。
<input>のidと対応する<label>のforを揃えます。
nameを揃えます。

<input   class="BR" id ="radio_1" name="set_1" type="radio" checked />
  <label class="BR" for="radio_1" style="width:6em">水素</label> 
<input   class="BR" id ="radio_2" name="set_1" type="radio" />
  <label class="BR" for="radio_2" style="width:6em">ヘリウム</label> 
<input   class="BR" id ="radio_3" name="set_1" type="radio" />
  <label class="BR" for="radio_3" style="width:6em">酸素</label>
<input   class="BR" id ="radio_4" name="set_1" type="radio" />
  <label class="BR" for="radio_4" style="width:6em">マグネシウム</label>

<input>には通常のラジオボタンと同様にvalueやonClickが設定できます。

widthを省略すると文字列の長さに沿った長さになります。

style="width:6em":
   水素 ヘリウム 酸素 マグネシウム
width定義なし
   水素 ヘリウム 酸素 マグネシウム

 他の色の例

黒バックの上に配置するなら次のような色の組み合わせも視認性がすぐれたものとなります。

<style>
input.GG {
   display: none;         /* デフォルトのポッチを消す */
   }
label.GG {
   background-image:url("./button_pattern_g.gif");
   color:white;           /* 文字色 */
   padding: 0.05em 0.75em;/* 上下左右の余裕 */
   display:inline-block;  /* これが無いとwidth指定ができない */
   text-align: center;    /* 文字は中央に配置 */
   border: 2px solid #505050;
   }
input.GG:checked + label {
   background-image:url("./button_pattern_g_light.gif");
   font-weight: bold;     /* ボールド体 */
   color:black;           /* 文字色 */
   border: 2px solid #505050;
   }
</style>

   display: none;         /* デフォルトのポッチを消す */
   }
label.GY {
   background-image:url("./button_pattern_g.gif");
   color:white;           /* 文字色 */
   padding: 0.05em 0.75em;/* 上下左右の余裕 */
   display:inline-block;  /* これが無いとwidth指定ができない */
   text-align: center;    /* 文字は中央に配置 */
   border: 2px solid #505050;
   }
input.GY:checked + label {
   background-image:url("./button_pattern_y_light.gif");
   font-weight: bold;
   color:black;           /* 文字色 */
   border: 2px solid #505050;
   }

input.YY {
   display: none;  
   }
label.YY {
   background-image:url("./button_pattern_y_dark.gif");
   color:white;          
   padding: 0.05em 0.75em;
   display:inline-block;
   text-align: center; 
   border: 2px solid #808080;
   }
input.YY:checked + label {
   background-image:url("./button_pattern_y_light.gif");
   font-weight: bold;
   color:black;           
   border: 2px solid #808080;
   }

input.RR {
   display: none;  
   }
label.RR {
   background-image:url("./button_pattern_r.gif");
   color:white;          
   padding: 0.05em 0.75em;
   display:inline-block;
   text-align: center; 
   border: 2px solid #808080;
   }
input.RR:checked + label {
   background-image:url("./button_pattern_r_light.gif");
   font-weight: bold;
   color:black;           
   border: 2px solid #808080;
   }
input.BB {
   display: none;  
   }
label.BB {
   background-image:url("./button_pattern_b.gif");
   color:white;          
   padding: 0.05em 0.75em;
   display:inline-block;
   text-align: center; 
   border: 2px solid #808080;
   }
input.BB:checked + label {
   background-image:url("./button_pattern_b_light.gif");
   font-weight: bold;
   color:black;           
   border: 2px solid #808080;
   }
input.OO {
   display: none;  
   }
label.OO {
   background-image:url("./button_pattern_o_dark.gif");
   color:white;          
   padding: 0.05em 0.75em;
   display:inline-block;
   text-align: center; 
   border: 2px solid #808080;
   }
input.OO:checked + label {
   background-image:url("./button_pattern_o_light.gif");
   font-weight: bold;
   color:black;           
   border: 2px solid #808080;
   }
input.VV {
   display: none;  
   }
label.VV {
   background-image:url("./button_pattern_v_dark.gif");
   color:white;          
   padding: 0.05em 0.75em;
   display:inline-block;
   text-align: center; 
   border: 2px solid #808080;
   }
input.VV:checked + label {
   background-image:url("./button_pattern_v_light.gif");
   font-weight: bold;
   color:black;           
   border: 2px solid #808080;
   }

class=GG (Green)：
   水素 ヘリウム 酸素 マグネシウム

class=GY (Green-Yellow)：
   水素 ヘリウム 酸素 マグネシウム

class=YY (Yellow):
   水素 ヘリウム 酸素 マグネシウム

class=RR (Red):
   水素 ヘリウム 酸素 マグネシウム

class=BB (Blue):
   水素 ヘリウム 酸素 マグネシウム

class=OO (Orange):
   水素 ヘリウム 酸素 マグネシウム

class=VV (Violet):
   水素 ヘリウム 酸素 マグネシウム

 イメージを使わないcssだけのボタン

色が変わるだけのボタンであればCSSのみで定義できます。

<style>
input.T {
   display: none;
   }
label.T {
   background-color: powderblue;
   border: 1px solid #808080;
   padding: 0.05em 0.75em;
   display:inline-block;
   text-align: center;
   }
input.T:checked + label {
   background-color: yellow;
   border: 1px solid #ff0000;
   }
</style>

   水素 ヘリウム 酸素 マグネシウム