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

チェックボックスの装飾


チェックボックスを装飾する

  ie6 op8

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

■ チェックボックスの装飾

 ←通常のチェックボックス   ←装飾したチェックボックス

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

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

チェックボックスは複数の選択肢の中から複数選ぶ時に使う部品です。
ラジオボタンと違い、いくつでもチェックを入れる事も消す事も出来ます。
name,valueの各属性の使い方はラジオボタンと同じですので、ラジオボタンの項を参照してください。


例:  音楽  読書  映画 ←複数設置でいくつでも選択
例: <input type="checkbox" name="a3" value="music" style="background-color:#ffcccc;border:1px dashed #ff99cc;">音楽
   <input type="checkbox" name="a3" value="book" style="background-color:#ffcccc;border:1px dashed #ff99cc;">読書
   <input type="checkbox" name="a3" value="movie" style="background-color:#ffcccc;border:1px dashed #ff99cc;">映画




■ 背景を画像にする

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

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