css+jQueryでチェックボックス&ラジオボックスをオリジナルデザインのボタンにする
Posted: 2012.04.10 / Category: javascript / Tag: jQuery ブラウザ標準のチェックボックス&ラジオボタンのデザインだと俺のクールなサイトには合わん。 といったときの為にボタン風なオリジナルデザインにする方法をご紹介します。 cssオンリーの場合 まずはcssのみでやってみます。 隣接セレクターやcheckedセレクターを使用している関係でieでは動きません。 <div class="check-group clearfix"> <div> <input id="checkbox1" type="checkbox" name="check[]" value="c1" /> <label for="checkbox1">Checkbox 1</label> </div> <div> <input id="checkbox2" type="ch
jQuery を使い、選択中のラジオボタンの背景色と枠線の色を変える方法
jQuery を使い、選択中のラジオボタンの背景色と枠線の色を変える方法。ラジオボタンにチェックを入れると、ラジオボタンを包んでいるlabel要素の背景色と枠線の色を変更する。背景色と枠線の色を変えることで、どのラジオボタンが選択中であるか、わかりやすくすることができる。 実装例（サンプル） ラジオボタン1 ラジオボタン2 ラジオボタン3 実装例（サンプル）の動作について ラジオボタンにチェックを入れると、背景色をピンク色に、枠線の色を赤色にする。 ラジオボタンからチェックを外すと、背景色を黄色に、枠線の色をグレーにする。 実装例（サンプル）のソースコード JavaScript <script type="text/javascript"> <!-- jQuery( function() { jQuery( '#jquery-smaple-form input[name=jquery-sm
チェックが入るとチェックボックスとラベル(文字)の背景色が変わります。
サンプルソース <HTML> <HEAD> <TITLE>チェックが入るとチェックボックスとラベル(文字)の背景色が変わります</TITLE> <STYLE type="text/css"> <!-- a,label{cursor:pointer;} label:hover { color : red; } .Mychk1{ width:140px; margin:5px 2px 2px 0px; font:12px; } --> </STYLE> <SCRIPT language=JavaScript> <!-- function chebg(chkID){ Myid=document.getElementById(chkID); if(Myid.checked == true){ Myid.parentNode.style.backgroundColor = '#C6E5FF'; }
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
