I currently have two radio buttons set up with custom styles. The styling and radio button code was found mainly online, with a few things that I changed to fit my need. The issue I am having is that if you click outside of the box, it still selects up to a certain distance, but does not trigger the associated click event.
let calcType = document.querySelector('#calcType')
let calcTypeLabels = document.querySelectorAll('.styled-label span')
calcTypeLabels.forEach((check) => {
check.addEventListener('click', (ev) => {
let parent = ev.target.parentElement
if (parent.querySelector('input').checked == false) {
parent.querySelector('input').checked = true
console.log("clicked radio button")
// setCalcType(parent.querySelector('input').value)
// currentType = parent.querySelector('input').value
// setRangeStyle()
}
})
})
/* Custom Radio Buttons */
.styled-radio {
display: none;
}
.styled-label {
display: inline-block;
padding: 5px 10px;
cursor: pointer;
/* This is the element that senses the clicks */
}
.styled-label span {
position: relative;
line-height: 22px;
}
.styled-label span:before,
.styled-label span:after {
content: "";
}
.styled-label span:before {
border: 1px solid #222021;
width: 20px;
height: 20px;
/* margin-right: 10px; */
display: inline-block;
vertical-align: top;
}
.styled-label span:after {
width: 14px;
height: 14px;
position: absolute;
top: 2px;
left: 4px;
transition: 300ms;
opacity: 0;
}
.styled-label input:checked + span:after {
opacity: 1;
}
.radio-label::after {
pointer-events: none;
}
.styled-label span:after {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<link href="./example.css" rel="stylesheet" type="text/css" />
</head>
<body>
<label class="styled-label">
<label class="radio-label" for="calcType">Difficulty</label>
<br />
<input
class="styled-radio"
id="calcType"
type="radio"
name="calcType"
value="diff"
checked
/>
<span></span>
</label>
<label class="styled-label">
<label class="radio-label" for="calcType">Study Days</label>
<br />
<input
class="styled-radio"
id="calcType"
type="radio"
name="calcType"
value="days"
/>
<span></span>
</label>
<script src="./example.js"></script>
</body>
</html>
Is there a way I could fix this by either stopping click events on certain elements (tried a few ::after things, but nothing was working), or possibly using a different way of styling the radio buttons.