自定义和不同的单选按钮 [英] Custom and different radio buttons

问题描述

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

I found a CSS structure which can make my radio buttons work with custom background images. But they all have the same background image. Is it possible to write a structure so that each individual radio button has it's own background image but the functionality stays the same.

我正在粘贴JsFiddle示例： JSFiddle示例< a>

I am pasting a JsFiddle example: JSFiddle example

例如，我想最后一个单选按钮瓜子有不同的背景图片。我如何做到这一点？

For example I want the last radio button "Melons" to have a different background image. How can I do this?

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

推荐答案

将此css放在输入之后[type =radio]：checked + label：之前 css

You can overwrite your css. put this css after your input[type="radio"]:checked + label:before css

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

希望这将有所帮助。

谢谢你，

这篇关于自定义和不同的单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！