Question

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

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

例如，我希望最后一个单选按钮“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;
}

Answer 1

工作和可扩展代码。 Live Demo

所有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;
}

Answer 2

你可以覆盖你的CSS。将此css放在input[type="radio"]:checked + label:before css

之后

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

希望这会有所帮助。

谢谢，

Answer 3

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

自定义和不同的单选按钮

3 个答案: