css - 用在 Firefox 中可用的 CSS 图像替换单选按钮？

Question

我有一个表格，人们可以选择他们喜欢的电影，我使用 radio 进行估算。我用一张图片替换了它，当它被选中时，它会变成另一张图片。它在 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 个单选按钮，所以您只能切换它一次……看到它或多或少在这个 fiddle 中工作 http://jsfiddle.net/e0sfh695/