html - 仅使用 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 所说，这几乎是实现这一目标的方法。可能他的代码是针对特定案例的，我发现了一些类似但比这简单得多的东西。我必须制作照片列表，并且在点击照片时，它必须显示点击的照片，但更大并且在列表之后的部分中。这就是为什么它对我不起作用。但我会先解释一切，然后再粘贴我的代码。

Dominic 代码仅在 label 时有效在radio-button旁边 .它对我不起作用，因为我有我的 <label>与 radio-buttons 分开.标签位于 <ul>单选按钮在 <div> 中在<ul>之后.这样它就不起作用了，这就是为什么我需要添加另一个相同的 <label>在每个 radio-button 旁边.现在我有 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
}