Замена переключателя с изображением с CSS, который работает в Firefox?

Question

У меня есть форма, в которой люди могут выбрать фильм, который им нравится, и я использую радио для приношения. Я заменил его изображением, и когда его выбрал, он изменится на другое изображение. Он работает так же, как я хочу в Chrome и IE, но не в Firefox. Вот код ..

CSS

#votetable input[type=radio] { 
float: bottom; 
-webkit-appearance: none; 
border: none; 
height: 402px; 
width: 275px; 
background: url("hobbit.jpg") left center no-repeat;  
background-size: 402px; 
} 
#votetable input[type="radio"]:checked { 
background: url("select.jpg") left center no-repeat; 
} 

и HTML только для получения дополнительной информации

HTML

<table id="votetable"> 
     <tr> <td> 
       <label for="movie1"></label> 
       <input type="radio" id="movie1" name="movie" value="batman"/> 
       </td> 

     </tr> 
</table> 

Это прекрасно работает в Chrome и IE, но не в Firefox. Есть ли что-то, что я могу добавить в свой код, чтобы он работал в Firefox? Id нравится придерживаться только CSS и HTML. Любая помощь будет оценена по достоинству.

Answer 1

Я надеюсь, что это сработает для вас. Обратите внимание, что псевдокласс класса :checked работает только в современных браузерах. Если вы хотите поддерживать старые браузеры, вам понадобится немного JavaScript, например, для переключения класса.

.custom-radio > input { 
    /* hide the real <input> element */ 
    position: absolute; 
    left: -9999px; 
} 

.custom-radio > .real-label { 
    /* and use a background image on a <span> instead */ 
    display: inline-block; 
    height: 402px; 
    width: 275px; 
    background: url("hobbit.jpg") left center no-repeat; 
    /* just as an example as I did not have your image */ 
    border: 2px solid red; 
    /* hide the label if you want */ 
    text-indent: -9999px; 
} 

.custom-radio > input:checked + .real-label { 
    background-image: url("select.jpg"); 
    /* again, just as an example */ 
    border-color: green; 
} 

... а также ваш HTML. Как вы можете видеть, <label> теперь обтекает <input>, так что, когда вы нажимаете на него, <input> получает щелчок.

<table id="votetable"> 
    <tr>  
     <td> 
      <label class="custom-radio"> 
       <input type="radio" id="movie1" name="movie" value="batman"/> 
       <span class="real-label">label</span> 
      </label> 
     </td> 
    </tr> 
</table> 

вид, что у вас есть только 1 переключатель, вы можете только переключить его один раз ... Смотрите более или менее работает в этой скрипке http://jsfiddle.net/dcnYM/