◆HTML：ボタン型のトグル(ON-OFF)ボタン
デフォルトのチェックボックス（トグルスイッチ）:
ボタン型トグルボタン:
自照式ボタン型トグルボタン：
ボタン型トグルボタン(ON-OFFボタン)の定義
別途定義するのではなく、 ◆HTML：ボタン型のラジオボタン でのラジオボタン定義を<input type="checkbox">で参照します。
使い方
<input>と<label>でクラスを参照します。
<input>のidと対応する<label>のforを揃えます。
nameは不要です。
<input class="BR" id="B1" type="checkbox" checked>
<label class="BR" for="B1" style="width:6em">水素</label>
<input class="BR" id="B2" type="checkbox">
<label class="BR" for="B2" style="width:6em">ヘリウム</label>
<input class="BR" id="B3" type="checkbox" >
<label class="BR" for="B3" style="width:6em">酸素</label>
<input class="BR" id="B4" type="checkbox">
<label class="BR" for="B4" style="width:6em">マグネシウム</label>
<input>には通常のチェックボックスと同様にvalueやonClickが設定できます。
widthを省略すると文字列の長さに沿った長さになります。
style="width:6em":
width定義なし:
他の色の例
黒バックの上に配置するなら次のような色の組み合わせも視認性がすぐれたものとなります。
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>
| 固定リンク