css - 输入 type="radio" 和隐藏的单选按钮 - chrome 中的问题？

Question

我有这个 HTML：

<input type="radio">
<span class="label">
    <label id="options_34537_2label" for="options_34537_2">
</label>
</span>

现在我还有一些 CSS，它隐藏了单选按钮本身并在我的标签前面放置了一个图像。

input[type="radio"] {
    display: none;
}

label:before {
    background: url("someimage.jpg") no-repeat scroll 0 0 transparent;
}

在 IE 和 FF 中，我可以单击图像以选择选项，在 Chrome 中，单击根本不起作用。知道如何解决这个问题吗？

谢谢！

Answer 1

您应该将其放入<input> 内部以<label>使其可圈：

<label><input type="radio"></label>

并直接在标签上使用背景属性，而不是使用 :before 伪类。然后添加一些文本或指定宽度以显示您的背景。