使用在Firefox中运行的CSS替换带有图像的单选按钮？

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中运行吗？我喜欢坚持使用CSS和HTML。任何帮助，将不胜感激。

Answer 1

我希望这适合你。请注意，:checked伪类仅适用于现代浏览器。如果你想支持旧的浏览器，你需要一些JavaScript来例如切换一个类。

.custom-radio > input {
    /* hide the real <input> element */
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.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/e0sfh695/