Customizing radio buttons

HTML-CSS
1

Hi guys! I’m working on my survey form right now and I want to customize my radio buttons. I’ve looked up instructions online but I don’t know what’s wrong with my code because it doesn’t work when I click the buttons. My code so far:

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="radio.css">
</head>
<body>
<ul style="list-style: none;">
   <li class="radio">
   	<input id="radio1" type="radio">
   	<label for="radio1">Yes</label>
   </li>
   <li class="radio">
   	<input id="radio2" type="radio">
   	<label for="radio2">Sometimes</label>
   </li>
   <li class="radio">
   	<input id="radio3"  type="radio">
   	<label for="radio3">No</label>
   </li>
</ul>
</body>
</html>

**CSS**
.radio input[type="radio"]{
	opacity:0;
}

.radio label{
	position: relative;
	right: 13px;
}

.radio label::before{
	content: "";
	display: inline-block;
	position: relative;
	top: 2px;
	right: 5px;
	border: 1.75px solid #82ccd9;
	border-radius: 50%;
	background-color: transparent;
	width: 10px;
	height: 10px;
}

.radio label::after {
	display: block;
	position: absolute;
	left: -1.5px;
	top: 6.5px;
	content: " ";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #fff;
}

.radio input[type="radio"]::checked + label::after {
    background-color: #82ccd9;
}

I would really appreciate if somebody can point out where it went wrong. Thanksss

2

I don’t know if this is the problem you’re talking about, but radio buttons need to have the same name attribute to be treated as a group.