用在 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/ 中或多或少地看到它工作