单选按钮背景仅使用 CSS？

Question

我需要做的是用图像替换单选按钮的外观。这可以通过 jQuery 轻松实现，但在这种情况下，我只需要使用 CSS 即可。有没有办法做到这一点？这是我的 HTML：

<div class="radio-buttons">
    <div class="holder">
        <span></span>
        <input type="radio" class="radio" id="cheetah" value="" />
    </div>
    <div class="holder">
        <span></span>
        <input type="radio" class="radio" id="horse" value="" />
    </div>
    <div class="holder">
        <span></span>
        <input type="radio" class="radio" id="lion" value="" />
    </div>
</div>

我尝试在单选按钮上应用样式background-image:，但它当然没有用。然后我添加了<span>，我想知道我是否可以为按钮设置样式display: none，并以某种方式在input:checked 上显示<span>，它将使用background-image: 设置样式？这是正确的方式还是我的方向完全错误？完全可以只用 CSS 来实现吗？

编辑：如果需要，单选按钮可能会更改为复选框。

Answer 1

正如 Dominik 所说，这几乎是实现这一目标的方法。可能是他的代码是针对特定情况的，我发现了一些类似但比这简单得多的东西。我必须制作照片列表，单击照片时，它必须显示单击的照片，但更大并且在列表之后的部分中。这就是为什么它对我不起作用。但我将首先解释一切，然后我将粘贴我的代码。

仅当label 在radio-button 旁边时，Dominic 代码才有效。它对我不起作用，因为我的<label> 与radio-buttons 是分开的。标签位于<ul> 中，单选按钮位于<div> 中<ul> 之后。这样它就不起作用了，这就是为什么我需要在每个radio-button 旁边添加另一个相同的<label>。现在我有 1 个单选按钮的两个标签。所以这是我的整个代码。我已经为 ul 标签内联设置样式，只是为了节省 css 中的一些空间。我用 bg-color 制作的，所以如果有人想尝试......它也适用于 bg-image

HTML：

<div class="shell">
    <form>
        <ul>
            <li><label class="label" for="cheetah" style="background-color: white"></label></li>
            <li><label class="label" for="horse" style="background-color: yellow"></label></li>
            <li><label class="label" for="lion" style="background-color: green"></label></li>
            <li><label class="label" for="squirrel" style="background-color: red"></label></li>
            <li><label class="label" for="tiger" style="background-color: purple"></label></li>
            <li><label class="label" for="bear" style="background-color: black"></label></li>
        </ul>

        <div class="radio-buttons">
            <div class="wrapper">
                <input type="radio" name="radio" class="radio" id="cheetah" value="" />
                <label class="label" for="cheetah" ></label>
            </div>
            <div class="wrapper">
                <input type="radio" name="radio" class="radio" id="horse" value="" />
                <label class="label" for="horse" ></label>
            </div>
            <div class="wrapper">
                <input type="radio" name="radio" class="radio" id="lion" value="" />
                <label class="label" for="lion" ></label>
            </div>
            <div class="wrapper">
                <input type="radio" name="radio" class="radio" id="squirrel" value="" />
                <label class="label" for="squirrel"></label>
            </div>
            <div class="wrapper">
                <input type="radio" name="radio" class="radio" id="tiger" value="" />
                <label class="label" for="tiger"></label>
            </div>
            <div class="wrapper">
                <input type="radio" name="radio" class="radio" id="bear" value="" />
                <label class="label" for="bear" ></label>
            </div>
        </div>
    </form>
</div>

CSS：

*{ margin: 0; padding: 0; }

.shell { width: 1000px; margin: 0 auto; }

ul { height: 150px; list-style: none; padding-bottom: 50px;  }

ul li {
    float: left; 
    border: 1px solid #666;
    margin-right: 14px; 
} 
ul li label {
    display: block; 
    width: 150px;
    height: 150px;
    cursor: pointer;
}

ul label {
    display: inline;
}

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

input[type="radio"]:checked + label.label {
    border: 1px  solid red;
    background-repeat: no-repeat;
    display: inline-block;
    height: 500px;
    width: 500px;
}
input[type="radio"]:checked + label[for="cheetah"] {
    background-color: white
}
input[type="radio"]:checked + label[for="horse"] {
    background-color: yellow
}
input[type="radio"]:checked + label[for="lion"] {
    background-color: green
}
input[type="radio"]:checked + label[for="squirrel"] {
    background-color: blue
}
input[type="radio"]:checked + label[for="tiger"] {
    background-color: purple
}
input[type="radio"]:checked + label[for="bear"] {
    background-color: black
}

Answer 2

正如我在评论中提供的链接中所述，您可以使用以下html：

<input type="radio" id="radio-2-1" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-1"></label><br />
<input type="radio" id="radio-2-2" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-2"></label><br />

加上类似的css：

.regular-radio {
display: none;
}

.regular-radio + label {
-webkit-appearance: none;
background-image: url("unchecked.png");
padding: 9px;
border-radius: 50px;
display: inline-block;
position: relative;
}

.regular-radio:checked + label:after {
content: ' ';
width: 12px;
height: 12px;
border-radius: 50px;
position: absolute;
top: 3px;
background-image: url("checked.png");
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
text-shadow: 0px;
left: 3px;
font-size: 32px;
}

.regular-radio:checked + label {
background-image: url("checked.png");
border: 1px solid #adb8c0;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
}

Answer 3

块级 HTML 元素有一些限制：

They must be separated from surrounding text by blank lines.
The begin and end tags of the outermost block element must not be indented.
Markdown can't be used within HTML blocks.