2

我需要做的是用图像替换单选按钮的外观。这可以通过 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>'s，我想知道我是否可以为按钮设置样式display: none，并以某种方式input:checked显示将使用<span>哪个样式background-image:？这是正确的方式还是我的方向完全错误？完全可以只用 CSS 来实现吗？

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

4

3 回答 3

4

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

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

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
}
于 2013-01-31T10:32:21.320 回答
1

正如我在评论中提供的链接中所述，您可以使用以下 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);
}
于 2013-01-31T09:35:07.607 回答
1

块级 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.
于 2013-05-04T12:12:23.857 回答