I've created these divs to act like radio buttons:
[![these 4divs][1]][1]
When I click on one of them, I want the border to turn blue like this: border: 2px solid blue;
However, instead, the issue shown below is happening:
[![the problem][2]][2]
How can I fix this and make the border color turn blue as intended?
Code from studies.js:
<ul>
<li>
<input type='radio' value= '1' name ='radio' id='radio1'/>
<label for='radio1'><div className="rcorners2 " ></div></label>
</li>
<li>
<input type='radio' value='2' name='radio' id='radio2'/>
<label for='radio2'><div className="rcorners2 " ></div></label>
</li>
<li>
<input type='radio' value='3' name='radio' id='radio3'/>
<label for='radio3'><div className="rcorners2 " ></div></label>
</li>
</ul>
Code from studies.css:
ul {
list-style:none;
}
li{
display:inline-block;
margin-right: 15px;
}
input{
visibility:hidden;
}
label{
cursor:pointer;
}
input:checked + label {
border: 2px solid blue;
}