javascript - 自定义单选框，里面有字母

Question

我这里有一个真正的问题，我需要像下面这样的形式来设计这个输入 radio :其中 P、M、G 和 GG 是我的单选按钮，有人可以仅使用 CSS 帮助完成此操作吗？

Answer 1

这可以通过与 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 ，您将获得与单选框演示相同的效果。