フォールバックは、

Question

これは私が私が持っているスタイルを削除してのフォールバックを行う必要がありないハックIEを使用するか、または動作するように:checked要素を取得するには、フォールバックのためでありますIE8を標準のラジオボタンに戻すことができます。

どうすればいいですか？

body { 
 
    font: 16px Arial, sans-serif; 
 
    background-color: #e0e0e0; 
 
} 
 

 
/* Hiding Radio */ 
 
input[type="radio"] { 
 
    display: none; 
 
} 
 

 
/* switch-canvas */ 
 
.switch-canvas { 
 
    width: 200px; 
 
    margin: 50px auto; 
 
    height: 40px; 
 
    padding: 5px; 
 
    background-color: #000; 
 
    font-size: 0; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 

 
label.black { 
 
    display: inline-block; 
 
    *display: inline; 
 
    zoom: 1; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    width: 50%; 
 
    height: 40px; 
 
    color: #222; 
 
    line-height: 40px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    transition: all 0.3s; 
 
    -webkit-transition: all 0.3s; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 

 
input.black[type="radio"]:checked + label.black { 
 
    background-color: #fff; 
 
    color: #000; 
 
    border-radius: 2px; 
 
} 
 
    \t \t

<div class="switch-canvas"> 
 
    <input class="black" type="radio" id="female" name="sex" checked="" /> 
 
    <label for="female" class="black">Female</label> 
 
    <input class="black" type="radio" id="male" name="sex" /> 
 
    <label for="male" class="black">Male</label> 
 
</div>

Answer 1

あなたはCSSセレクタを追加することによってこれを行うことができます。チェックボックススタイルに：ありません（：確認）をチェックして。このセレクタはIE8以前では認識されないため、ブラウザはスタイルを無視し、チェックボックスを非表示にしたり、ラベルのスタイルを表示したりしません。あなたの例では

は、インスタンスのために与える：

  /* Hiding Radio */ 
     input[type="radio"]:checked, input[type="radio"]:not(:checked) { 
      display: none; 
     } 
     input[type="radio"]:checked + label.black, input[type="radio"]:not(:checked) + label.black { 
      display: inline-block; 
      *display: inline; 
      zoom: 1; 
      font-size: 16px; 
      font-weight: bold; 
      width: 50%; 
      height: 40px; 
      color: #222; 
      line-height: 40px; 
      text-align: center; 
      cursor: pointer; 
      transition: all 0.3s; 
      -webkit-transition: all 0.3s; 
      -webkit-border-radius: 5px; 
      -moz-border-radius: 5px; 
      border-radius: 5px; 
     } 
     input.black[type="radio"]:checked + label.black { 
      background-color: #fff; 
      color: #000; 
      border-radius: 2px; 
     }