CSSの場合チェックボックスをオフにしたり、チェックしない状態でラジオボタンをどのようにスタイルするのですか？

Question

私は、目に見えないラジオボタンと目に見えるラベルのチェックボックスを使って、モードUI（いつでもシングルモードをアクティブにする）とトグルボタンを作成しています。理想的には私は、私は次のテンプレートを使用している

チェック

プレス

1. 未確認以下の状態ごとに異なるイメージを持っていると思います。 ：checkedと：not（：checked）セレクタが動作しています。ボタン要素の場合、：マウスが押された/押された状態で動作しているようです。チェックボックスやラジオボタンについては、動作していないようです。マウスを押し下げた状態のためのスタイルをどうやって作るのですか？

   input#toggle_button:not(:checked) ~label{ 
        content: url(../assets/button_toggle_normal.png); 
       } 
   
       input#toggle_button:checked ~label{ 
        content: url(../assets/button_toggle_selected.png); 
       } 
   
       input#toggle_button:active ~label{ 
        content: url(../assets/button_toggle_pressed.png); 
       } 
   

Answer 1

：

$("input#toggle_button ~label").on("mousedown", function(){ 
    $(this).addClass("pressed"); 
}).on("mouseup", function(){ 
    $(this).removeClass("pressed"); 
}); 

チェックこのCodepen：http://codepen.io/kaoz70/pen/JKWXvx

Answer 2

:activeは、チェックボックスとラジオボタンと組み合わせて使用​​できません。

the W3 standardパー

、:activeボタンのみの入力で動作します：

要素は、そのtype属性送信ボタン、イメージ・ボタン、リセットボタン、またはボタンの状態

である input要素である場合

$('[type="checkbox"]').bind('mousedown', function() { 
    $(this).addClass('active'); 
}).bind('mouseup mouseout change', function() { 
    $(this).removeClass('active'); 
}); 

など、賢明な回避策が必要な場合があります。 0

注：アクティブ状態では、おそらくスペースバーのキーダウンイベントやタッチイベントも考慮する必要があります。

私は、私が行くと、このためにJavascriptを/ jQueryのを使用することになり、この純粋なCSSのソリューションが存在することになると思ういけない