单选按钮与自定义图像 [英] Radio button with custom image

问题描述

我使用这个例子的复选框，但后来我意识到我需要一个单选按钮。

有人可以为单选按钮自定义此示例吗？

 ：root {padding：40px} [name = radio] {display：none} [for ^ = radio] {position：relative; margin：64px} [for ^ = radio]：before {content：''; position：absolute; left：-15px; top：-15px; width：32px; height：32px; background：red} [type = radio]：checked + [for ^ = radio]：before {background：green}  

 < input id = radio-1 type = radio name = radio />< label for = radio-1>< / label>< input id = radio -2 type = radio name = radio />< label for = radio-2>< / label>< input id = radio-3 type = radio name = radio />< label for = radio-3> ;< / label>  

https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectorsrel =nofollow noreferrer>一般兄弟选择器

 ：root {padding：40px} [name = radio] {display：none} [for ^ = radio] {position：relative; margin：64px} [for ^ = radio]：before {content：''; position：absolute; left：-15px; top：-15px; width：32px; height：32px;背景：red} [id = radio-1]：checked〜[for = radio-1]：before，[id = radio-2]：checked〜 ]：checked〜[for = radio-3]：before {background：green}  

 < input id = radio-1 type = radio name = radio />< input id = radio-2 type = radio name = radio />< input id = radio-3 type =无线电名称=无线电/>< label for = radio-1>< / label>< label for = radio-2>< / label> / code> 

基本 b
$ b

  [type = radio] {position：relative; margin：40px} [type = radio]：before {content：''; position：absolute; left：-15px; top：-15px; width：32px; height：32px; background：red} [type = radio]：checked：before {background：green}  

 < input type = radio />  

多个输入

  [type = radio ] {position：relative; margin：40px} [type = radio]：before {content：''; position：absolute; left：-15px; top：-15px; width：32px; height：32px; background：red} [type = radio]：checked：before {background：green}  

 < input type = radio name = radio />< input type = radio name = radio />< input type = radio name = radio />  / pre> 

I've used this example for checkboxes but then later I realized I need one for the radio buttons.

Can someone please customize this example for radio buttons?

Change checkbox check image to custom image

html

<input type="radio" class="input_class_checkbox" name="role"> Coach
<input type="radio" class="input_class_checkbox" name="role"> Athlete

jquery

$('.input_class_checkbox').each(function(){
    $(this).hide().after('<div class="class_checkbox" />');

});

$('.class_checkbox').on('click',function(){
    $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
});

Fiddle:

http://jsfiddle.net/cn6kn/

or is there a one stop solution to use custom images both for radio button and checkboxes. I searched a few but all of them are offering their own skins.

From the example I customized to included background-images as follows but it's not working for the radio buttons, all radio buttons remain checked irrespective I click the other one.

.class_checkbox {
    width: 36px;
    height: 36px;
    background: url("../images/checkbox.png");
}
.class_checkbox.checked {
    background: url("../images/checkbox-checked.png");
}

解决方案

Use Pseudo-elements in this case i am using ::before (:before)

Update: since firefox doesn't support pseudo-elements on inputs yet, use the adjacent sibling selectors

:root{padding: 40px}

[name=radio]{
    display: none
}

[for^=radio]{
    position: relative;
    margin: 64px
}

[for^=radio]:before{
    content: '';
    position: absolute;
    left: -15px;
    top: -15px;
    width: 32px;
    height: 32px;
    background: red
}

[type=radio]:checked + [for^=radio]:before{
    background: green
}

<input id=radio-1 type=radio name=radio />
<label for=radio-1></label>
<input id=radio-2 type=radio name=radio />
<label for=radio-2></label>
<input id=radio-3 type=radio name=radio />
<label for=radio-3></label>

Or the General sibling selectors

:root{padding: 40px}

[name=radio]{
    display: none
}

[for^=radio]{
    position: relative;
    margin: 64px
}

[for^=radio]:before{
    content: '';
    position: absolute;
    left: -15px;
    top: -15px;
    width: 32px;
    height: 32px;
    background: red
}

[id=radio-1]:checked ~ [for=radio-1]:before,
[id=radio-2]:checked ~ [for=radio-2]:before,
[id=radio-3]:checked ~ [for=radio-3]:before{
    background: green
}

<input id=radio-1 type=radio name=radio />
<input id=radio-2 type=radio name=radio />
<input id=radio-3 type=radio name=radio />

<label for=radio-1></label>
<label for=radio-2></label>
<label for=radio-3></label>

The basic

[type=radio]{
    position: relative;
    margin: 40px
}

[type=radio]:before{
    content: '';
    position: absolute;
    left: -15px;
    top: -15px;
    width: 32px;
    height: 32px;
    background: red
}

[type=radio]:checked:before{
    background: green
}

<input type=radio />

multiple inputs

[type=radio]{
    position: relative;
    margin: 40px
}

[type=radio]:before{
    content: '';
    position: absolute;
    left: -15px;
    top: -15px;
    width: 32px;
    height: 32px;
    background: red
}

[type=radio]:checked:before{
    background: green
}

<input type=radio name=radio />
<input type=radio name=radio />
<input type=radio name=radio />

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