自定义收音机盒里面的字母

Question

我在这里遇到了一个真正的问题，我需要设置这个输入收音机的样式，如下表所示： 其中P，M，G和GG是我的单选按钮，有人可以帮助只用CSS做这个吗？

Answer 1

See this fiddle

在上面的小提琴中，只需将javascript http://javabooksync.netai.net/Projects/m.png中的图片替换为您想要的十字图像。

Updated fiddle

在上述小提琴中，所有标签都使用相同的背景图像http://i.imgur.com/BD2XGdN.png

Answer 2

可以使用纯CSS完成，但不支持IE8或以下版本：

您只需将输入元素的opacity设置为0，并将它们绝对放在容器元素中。然后，您可以使用:checked伪选择器为该容器内的其他元素设置样式，仅用于检查输入。

参见示例：

http://jsfiddle.net/S69Dx/

请注意，我将字母放在span元素中，然后使用input:checked + span选择该字母。检查输入旁边的范围。

Answer 3

这可以通过与Blake Mann类似的方式完成，但不需要绝对定位的元素和其他“黑客”。您只需使用<label>标记即可获得相同的效果：

HTML：

<form action="#">
    <label class="coolbox">
        <input type="checkbox" name="P" value="P"/>
        <span>P</span>
    </label>
    <label class="coolbox">
        <input type="checkbox" name="M" value="M"/>
        <span>M</span>
    </label>
    <label class="coolbox">
        <input type="checkbox" name="G" value="GG"/>
        <span>G</span>
    </label>
    <label class="coolbox">
        <input type="checkbox" name="GG" value="GG"/>
        <span>GG</span>
    </label>
</form>

CSS：

label.coolbox {
    background:#546;
    padding:10px;
    margin:2px;
    display:inline-block;
    width:35px;
    height:30px;
    line-height:30px;
    text-align:center;
    vertical-align:middle;
    font-weight:bold;
    font-size:20px;
}
label.coolbox input {display:none;}
label.coolbox span {color:white;}
label.coolbox input:checked + span {color:#9F9;}

<强> Demo

this demo显示了另一种方法，使用for=""属性来引用您要使用<label>触发的输入的ID。

使用背景图像

Here 是一个演示，展示了如何使用背景图片执行此操作。我使用了for属性的第二个演示版布局，因为在我看来这通常更容易使用。此演示使用以下内容：

label.coolbox {
    margin:2px;
    display:inline-block;
    width:47px;
    height:36px;
    background-image: url("http://i.imgur.com/BD2XGdN.png");
    background-position:top;
}
input:checked + label.coolbox {
    background-position:bottom;
}

现在发生的事情是它在background-position之间切换。 top表示显示上半部分，bottom表示显示下半部分。这是因为我使width和height与该图像的两半中的一半完全相同。如果您修改宽度或高度，背景图像看起来不会很好。

您也可以尝试：

• with letters inside the boxes
• using radio boxes instead

如果您更改了任何演示中的name属性，以便它们在所有输入中都相同，然后将type属性更改为radio，那么您将拥有与收音机盒演示效果相同。