0

我发现了一个 CSS 结构，它可以使我的单选按钮与自定义背景图像一起使用。但它们都有相同的背景图像。是否可以编写一个结构，以便每个单独的单选按钮都有自己的背景图像，但功能保持不变。

我正在粘贴一个 JsFiddle 示例：JSFiddle 示例

例如，我希望最后一个单选按钮“Melons”具有不同的背景图像。我怎样才能做到这一点？

到目前为止的CSS：

input[type="radio"] {
    display:none;
}
input[type="radio"] + label {
    display:inline;
    font-size: 18px;
}
input[type="radio"] + label:before {
    content: '';
    display:inline-block;
    width: 32px;
    height: 32px;
    background: url(http://dl.dropbox.com/u/51558405/radio-checked.png) no-repeat;
    vertical-align: middle;
}
input[type="radio"]:checked + label:before {
    content: '';
    background: url(http://dl.dropbox.com/u/51558405/radio-unchecked.png) no-repeat;
}
4

3 回答 3

2

工作和可扩展的代码。现场演示

所有radio按钮的名称应该相同，以便它们作为一个组工作。我已经添加class="class1"到正常条目和class="class2"特殊条目中。

HTML

<li>
    <input class="class1" type="radio" id="radio" name="radios" checked />
    <label for="radio">Apples</label>
</li>
<li>
    <input class="class1" type="radio" id="radio2" name="radios" />
    <label for="radio2">Pineapples </label>
</li>
<li>
    <input class="class1" type="radio" id="radio3" name="radios" />
    <label for="radio3">Pomarance</label>
</li>
<li>
    <input class="class2" type="radio" id="nekaj" name="radios" />
    <label for="nekaj">Pomarance123</label>
</li>

CSS

input[type="radio"][class="class1"] + label:before {
    content: '2';
    display:inline-block;
    width: 32px;
    height: 32px;
    background: url(http://dl.dropbox.com/u/51558405/radio-checked.png) no-repeat;
    vertical-align: middle;
}

input[type="radio"][class="class1"]:checked + label:before {
    content: '3';
    background: url(http://dl.dropbox.com/u/51558405/radio-unchecked.png) no-repeat;
}

input[type="radio"][class="class2"] + label:before {
    content: '444';
    display:inline-block;
    width: 32px;
    height: 32px;
    background: url(http://www.clker.com/cliparts/M/2/V/6/F/u/radiobutton-checked-sm-th.png) no-repeat;
    background-size:100% auto;
    vertical-align: middle;
}

input[type="radio"][class="class2"]:checked + label:before {
    content: '444';
    display:inline-block;
    width: 32px;
    height: 32px;
    background: url(http://www.clker.com/cliparts/M/2/V/6/F/u/radiobutton-checked-sm-th.png) no-repeat;
    background-size:100% auto;
    vertical-align: middle;
}
于 2013-01-14T11:40:21.337 回答
1

你可以覆盖你的CSS。把这个css放在你的input[type="radio"]:checked + label:beforecss之后

#radio4 + label:before {
    content: '';
    background: url(your image path);
}

希望这会有所帮助。

谢谢，

于 2013-01-14T12:54:04.080 回答
0

我也这样做，但我的问题是不同的浏览器显示不同的对齐方式，单选按钮的垂直对齐方式不正确，特别是 mac 上的 google-chrome 从不显示正确的对齐方式

于 2013-07-15T06:50:10.880 回答