0

ラジオ ボタンをカスタム背景画像で動作させることができる CSS 構造を見つけました。しかし、それらはすべて同じ背景画像を持っています。個々のラジオ ボタンごとに独自の背景画像を持ち、機能は同じままになるような構造を作成することは可能ですか。

JsFiddle の例を貼り付けています: JSFiddle の例

たとえば、最後のラジオボタン「メロン」に別の背景画像を付けたいとします。これどうやってするの？

これまでの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

Working and expandable code. Live Demo

The name of all radio buttons should be same for them to work as a group. I have added class="class1" to normal entries and class="class2" to special entry.

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 を上書きできます。input[type="radio"]:checked + label:beforeあなたのCSSの後にこのCSSを入れてください

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

これが役立つことを願っています。

ありがとうございました、

于 2013-01-14T12:54:04.080 に答える