The span's background color is not changing correctly when the radio button is changed. Why is this happening and how can it be fixed?
div {
margin: 0 0 0.75em 0;
}
.formgroup input[type="radio"] {
display: none;
}
input[type="radio"],
label {
color: brown;
font-family: Arial, sans-serif;
font-size: 14px;
}
input[type="radio"],
label span {
display: inline-block;
width: 19px;
height: 19px;
margin: -1px 4px 0 0;
vertical-align: middle;
cursor: pointer;
-moz-border-radius: 50%;
border-radius: 50%;
}
input[type="radio"],
label span {
background-color: brown;
}
input[type="radio"]:checked + p + span{
background-color:orange;
}
input[type="radio"] + span,
input[type="radio"]:checked + span {
-webkit-transition:background-color 0.4s linear;
-o-transition:background-color 0.4s linear;
-moz-transition:background-color 0.4s linear;
transition:background-color 0.4s linear;
}<div class="main">
<section class="artistpage">
<div class="search">
<h1>Artist Directory</h1>
</div>
<ul class="artistlist">
<li class="artist cf">
<div class="info">
<label class="formgroup">
<input type="radio">
<span></span>Op1
<span></span>Op2
<span></span>Op3
</label>
</div>
</li>
</ul>
</div>No matter which radio option I select, the first one always ends up being selected.