CODEWITHSUNDEEP
htmlcssformsradio-button
user2694306
user2694306

Reputation: 4050

Radio Button Images Not Allowing Value Seelection

I am trying to use images in place of radio buttons. When I don't use images I can select the 'male/female' value correctly. However, when I stylize the css to use images the value always defaults to male. The image used is a sample. Can you please help point out my error in the code below. Also, can anyone provide any pointers on how to use different images for the different radio buttons.

HTML:

<input type="radio" id="genderMale" name="gender" value="male"/>
<label for="genderMale"></label>
<input type="radio" id="genderFemale" name="gender" value="female"/>
<label for="genderFemale"></label>

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: 320px;
    height: 320px;
    background: url(http://www.clker.com/cliparts/T/2/s/A/0/e/male-bathroom-bw-w-o-boarder-md.png) no-repeat;
    vertical-align: middle;
}

input[type="radio"]:checked + label:before {
    content:'';
    background: url(http://www.clker.com/cliparts/T/2/s/A/0/e/male-bathroom-bw-w-o-boarder-md.png) no-repeat;
    border-style: solid;
    border-width: 10px;
}

Upvotes: 0

Views: 79

Answers (2)

T J
T J

Reputation: 43156

As far as i can see, it's returning the proper value... check this JSFiddle

as for giving different images for the radio buttons, you can use nth-child css selector as follows:

input[type="radio"]:nth-child(1) + label:before {
content:'';
display:inline-block;
width: 320px;
height: 320px;
background: url(http://www.clker.com/cliparts/T/2/s/A/0/e/male-bathroom-bw-w-o-boarder-md.png) no-repeat;
vertical-align: middle;
}
input[type="radio"]:nth-child(3) + label:before {
content:'';
display:inline-block;
width: 320px;
height: 320px;
background: url(some other url for female image) no-repeat;
vertical-align: middle;
}

Check this JSFiddle

Upvotes: 0

Dryden Long
Dryden Long

Reputation: 10182

You don't need to use :before for this when you can just place the img tag within your label like so:

<input type="radio" id="genderMale" name="gender" value="male"/>
<label for="genderMale">
    <img src="..." />
</label>
<input type="radio" id="genderFemale" name="gender" value="female"/>
<label for="genderFemale">
    <img src="..." />
</label>

And then remove the :before from your CSS

Fiddle: http://jsfiddle.net/L94mK/

Upvotes: 1

Related Questions