スタイリングチェックボックスとラジオボタン

Question

未チェックのチェックボックスには画像を、チェックボックスには別の画像を使用します。ラベルやクラスなどを追加したくありません。 HTMLだけを残しておきたいだけです。<input type="checkbox" /> HTMLを残しておけば、JavaScriptやjQueryを使っても構いません。 これは私が探しているものの例ですが、Webkitブラウザでのみ動作します。 http://jsfiddle.net/7kScn/ ラベルやクラス、IDを追加しないと、これに対応するソリューションがありますか？唯一のベータ版にあるように見えるが

Answer 1

は、残念ながら、私ははい、明らかにされていない必要があります、ありますあなたはjQuery、CSS（X）HTMLなどでできる非常に柔軟で素敵なものですが、本質的にはinputをdivに変換します。選択したドロップダウンに適したものを見つけることも難しかったです。私は選択ボックスでこれを見つけることになりました。チェックボックスとラジオボタンで同様のことができるかどうかを調べるつもりです。 http://bavotasan.com/2011/style-select-box-using-only-css/

私は何か完璧なものを見つけました。 http://acidmartin.wordpress.com/2011/06/23/imageless-css-3-custom-checkboxes-and-radio-buttons/ 色とフォントはかなり醜いですが、それは私がそれに必要なものを達成しました。

Answer 2

これは、興味深いオプションのようになります。

http://widowmaker.kiev.ua/checkbox/

Answer 3

楽しい金曜日の挑戦を、ここで私のややハックの実装です。あなたがより良い入力タイプのターゲティングとより堅牢なセレクタを含める必要があります実際のアプリのために覚えておいてください：

JSFiddle： http://jsfiddle.net/2RNVh/

$("input").each(function() { 
    var $this = $(this); 
    $this.hide(); 

    var $image = $("<img src='http://refundfx.com.au/uploads/image/checkbox_empty.png' />").insertAfter(this);  

    $image.bind("click", function() { 
     var $checkbox = $(this).prev("input"); 
     $checkbox.prop("checked", !$checkbox.prop("checked"));  
     checkImage(); 
    }) 

    function checkImage() { 
     if($image.prev("input").prop("checked")) { 
      $image.attr("src", "http://refundfx.com.au/uploads/image/checkbox_full.png"); 
     } else { 
      $image.attr("src", "http://refundfx.com.au/uploads/image/checkbox_empty.png"); 
     } 
    } 

}); 

Answer 4

JqueryのUIに行くのに役立つかもしれない

チェックボックス例： http://jqueryui.com/button/#checkbox

ラジオhttp://jqueryui.com/button/#radio

GLのHF