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: {{1}}？这是正确的方式还是我完全错误的方向？它只能用CSS实现吗？

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

Answer 1

正如多米尼克所说，这几乎是实现这一目标的方法。可能是他的代码是针对特定情况的，我发现了类似但比这更简单的东西。我必须制作照片列表，点击一张照片，它必须显示点击的照片，但是更大，并在列表后面的部分。这就是为什么它不适合我。但我先解释一下，然后我会粘贴我的代码。

仅当label radio-button旁边时，Dominic代码才有效。它对我不起作用，因为我将<label>与radio-buttons分开了。标签位于<ul>，单选按钮位于<div>之后的<ul>。这样它就不起作用了，这就是我需要在每个<label>旁边添加另一个radio-button的原因。现在我有1个单选按钮的两个标签。所以这是我的整个代码。为了节省css中的一些空间，我设计了内联的ul标签样式。我是用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.

单选按钮背景只有CSS？

3 个答案: