I've been struggling to make the following code work:
html
<div class = "col-md-4 video text-center wrapper-q1">
<p class = "no-padding">
<input class="question1" id = "vraag1" type="radio" name="q1" value="Moon"> <br />
<label class = "pointer" for = "vraag1">Text</label>
</p>
</div>
css
input[type="radio"] {
display:none;
}
label:before {
content: "";
display: block;
width: 33px;
height:33px;
margin:0 auto;
background-image: url("../img/radio-btn.png");
}
input[type=radio]:checked + label {
content: "";
background-image: url("../img/radio-btn-checked.png");
font-size: 30px;
text-align: center;
line-height: 18px;
}
While the radio button displays, I'm having trouble getting it to switch to the "checked" image when clicked.
Any assistance or guidance would be greatly appreciated!