Styling radio button not working - html

Question

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

Answer 1

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

Answer 2

Try to use name as common for radio buttons you used like this:
HTML:
name="title[mr]"
Demo