CODEWITHSUNDEEP
htmlcss
Niks
Niks

Reputation: 95

Styling radio button not working

I'm trying to style my radio buttons but for some reason it's not working. If I click on the one radio button then it works but the problem comes in is when I click on another radio button. What happens is that the first one I clicked stays checked and the second one I click is also checked instead of the first one becoming unchecked.

My html

<li>
<label>* Title</label>
<div class="registration_title">
    <input id="mr" type="radio" name="title[mr]" value="Mr">
    <label for="mr"><span></span>Mr.</label>
    <input id="mrs" type="radio" name="title[mrs]" value="Mrs">
    <label for="mrs"><span></span>Mrs.</label>
</div>

my css

input[type="radio"] {
display: none;
}
input[type="radio"] + label {
color: green;
}
input[type="radio"] + label span {
background: none repeat scroll 0 0 black;
border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 19px;
margin: -1px 4px 0 0;
vertical-align: middle;
width: 19px;
}
input[type="radio"]:checked + label span {
background: pink;
}

Here is a jsfiddle: JSFIDDLE

Upvotes: 1

Views: 2713

Answers (2)

Sarath Kumar
Sarath Kumar

Reputation: 2353

The name should be same in radio buttons.. try this.. 

<div class="registration_title">
    <input id="mr" type="radio" name="title" value="Mr">
    <label for="mr"><span></span>Mr.</label>
    <input id="mrs" type="radio" name="title" value="Mrs">
    <label for="mrs"><span></span>Mrs.</label>
</div>

here is the FIDDLE

refer THIS to understand about radio buttons

Upvotes: 2

G.L.P
G.L.P

Reputation: 7217

Try to use name as common for radio buttons you used like this:

HTML:

name="title[mr]"

Demo

Upvotes: 1

Related Questions