Custom Styling Radio Input Dark Theme

<style>
div {
  background: black;
  opacity: 0.8;
}
input[type="radio"] {
    position: absolute;
    opacity: 0;
}

input[type="radio"] + .radio {
    border: 1px solid cyan;
    border-radius: 50%;
    display: inline-block;
    width: 10px;
    height: 10px;
}

input[type="radio"]:checked + .radio {
    background: cyan;
}
span.whitetext {
  color:white;
}
</style>

<div>
<label for="male">
    <input id="male" type="radio" name="gender" value="male" />
    <span class="radio"></span>
    <span class="whitetext">Male</span>
</label>

<label for="female">
    <input id="female" type="radio" name="gender" value="female" checked />
    <span class="radio"></span>
    <span class="whitetext">Female</span>
</label>
</div>