Radio button with custom image

Question

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

all I've tried is to search for a custom image solution, changing the type to radio button didn't work — user2727195
– user2727195, Commented Jan 16, 2015 at 19:19
What did not work? A radio button behaves differently to a checkbox. — Martin Lantzsch
– Martin Lantzsch, Commented Jan 16, 2015 at 19:22
Rather than trying to adapt that solution, why not use something specifically for radio buttons? Here is a related question: stackoverflow.com/questions/5112995/… — rwwagner90
– rwwagner90, Commented Jan 16, 2015 at 19:23

Gildas.Tambo · Accepted Answer · 2015-01-16 21:11:14Z

3

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

enter image description here

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

enter image description here

: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

enter image description here

: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 />

edited Jan 16, 2015 at 21:11

answered Jan 16, 2015 at 19:29

Gildas.Tambo

22.7k7 gold badges53 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user2727195 Over a year ago

can you please add more radio buttons to the example

user2727195 Over a year ago

your example is awesome, how's browser compatibility overall, i.e. 8 or 9

user2727195 Over a year ago

I'd love if you can do one version for checkboxes as well using :before,

user2727195 Over a year ago

Awesome @Tambo, it's elegant and super, and much better than crap on the internet, can you also please add another update, how to do the same for checkboxes using :before. thanks

user2727195 Over a year ago

I've posted another question please have a look stackoverflow.com/questions/27991668/checkbox-with-custom-image

|

indubitablee · Accepted Answer · 2015-01-16 19:38:28Z

2

oh sorry, i misunderstood the first time, how about something like this? http://jsfiddle.net/swm53ran/126/

pretty much whats happening is that the old radio button css is getting hid, and then your css will take over, but still maintains the functionality of a radio button.

label {  
    display: inline-block;  
    cursor: pointer;  
    position: relative;  
    padding-left: 25px;  
    margin-right: 15px;  
    font-size: 13px;  
}  

input[type=radio] {  
    display: none;  
} 

label:before {  
    content: "";  
    display: inline-block;  

    width: 16px;  
    height: 16px;  

    margin-right: 10px;  
    position: absolute;  
    left: 0;  
    bottombottom: 1px;  
    background-color: #aaa;  
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
}  
.radio label:before {  
    border-radius: 8px;  
}  

input[type=radio]:checked + label:before {  
    content: "\2022";  
    color: red;  
    font-size: 30px;  
    text-align: center;  
    line-height: 18px;  
}

edited Jan 16, 2015 at 19:38

answered Jan 16, 2015 at 19:27

indubitablee

8,2262 gold badges27 silver badges50 bronze badges

3 Comments

user2727195 Over a year ago

no i mean to customize the background image of a radio button for both checked and unchecked state, just like the link mentioned in question comments

indubitablee Over a year ago

@user2727195 apologies, please look at the edited answer

Fuzzyma Over a year ago

the one and only answer because one need no js to achive that! +1

Collectives™ on Stack Overflow

Radio button with custom image

2 Answers 2

8 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related