Replace radio buttons with images, with CSS or Pure JS. Some restrictions

Question

<label for="apsgender">
    <div class="join-label">Gender</div>
</label>
    <fieldset id="gender_male">
        <input type="radio" name="apsgender" value="1">
            Male
        </fieldset>
    <fieldset id="gender_female">
        <input type="radio" name="apsgender" value="2">
            Female
        </fieldset>

This is the code I am dealing with right now. Setting up my css with this method I took from another stackoverflow post is not working because of the use of fieldsets and odd label up front.

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

label {
    display:block;
    padding-left:30px;
    font-family:Arial;
    font-size:16px;
    background: url('http://projects.opengeo.org/common/geosilk/trunk/silk/cross.png') left center no-repeat;
}

input[type="radio"]:checked + label {
    background: url('http://particletree.com/examples/buttons/tick.png') left center no-repeat;
}

Our development team set this code up and I guess no one has ever attempted to use images for radio buttons. Also I could use pure JS, if it's possible, but i can only place the scripts in the body before the elements, not after.

Let me know if this is even possible. Thanks in advance.

I'll post the jsFiddle i'm working on but literally it's going no where. http://jsfiddle.net/z25FR/1/

Solution 1

http://jsfiddle.net/nm3uB/1/

You need to use Javascript to rewrite the HTML, and then CSS for the field switching. Everything can go in the head and no need to touch the template.

JS:

window.onload=function(){ 
    gender_male.innerHTML='<input type="radio" name="apsgender" value="1" checked><label>Male</label>';
    gender_female.innerHTML='<input type="radio" name="apsgender" value="2"><label>Female</label>';
}

CSS:

fieldset{position:relative}
input[type="radio"]{
    opacity: 0;
    position:absolute;
}
input[type="radio"]+label{
    background: url('http://projects.opengeo.org/common/geosilk/trunk/silk/cross.png') left center no-repeat;
    padding-left: 30px;
}
input[type="radio"]:checked+label{
    background: url('http://projects.opengeo.org/common/geosilk/trunk/silk/accept.png') left center no-repeat;
    padding-left: 30px;
}

Solution 2

I have a CSS solution for this, but some HTML will need to change.

fiddle

First of all, we need to hide the radio button, because it can't be styled:

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

Then, we make the text near the radio button a label:

<input id="male" type="radio" name="apsgender" value="1">
<label for="male">Male</label>

(don't forget the id and for or you won't have how to check the radio button)

Then, we style the label to look like it's a button:

input[type="radio"]+label{
    background: url('http://projects.opengeo.org/common/geosilk/trunk/silk/cross.png') left center no-repeat;
    padding-left: 30px;
}

The above code will modify the label directly following the radio button. Then, we can change the background to another image when the radio button is :checked:

input[type="radio"]:checked+label{
    background-image: url('http://projects.opengeo.org/common/geosilk/trunk/silk/accept.png');
}

Solution 3

While this may not help, I will mention you're incorrectly coding the HTML. It should be:

<fieldset>
 <legend>Gender</legend>
 <input type="radio" name="apsgender" id="m" value="1">
 <label for="m">Male</label>
 <input type="radio" name="apsgender" id="f" value="2">
 <label for="f">Female</label>
</fieldset>

I have seen custom radio buttons, but don't have a source. However, depending how it is done may have some accessibility implications