I want to handle a click event using radio and I changed the opacity to 0 to make them invisible, but my problem is that I can't put the text over radio and z-index not working. Here is my code:
.container {
width: 400px;
height: 400px;
display: flex;
flex-wrap: wrap;
overflow: hidden;
border-radius: 50%;
background-color: olive;
margin: auto;
border: 1px solid black;
transform: rotate(45deg);
}
.box {
width: 50%;
height: 50%;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
span {
transform: rotate(-45deg);
}
input[type="radio"] {
width: 100%;
height: 100%;
opacity: 0;
}
<form action="#">
<div class="box box1">
<input type="radio" name="click">
<span>text 1</span>
</div>
<div class="box box2">
<input type="radio" name="click">
<span>text 2</span>
</div>
<div class="box box3">
<input type="radio" name="click">
<span>text 3</span>
</div>
<div class="box box4">
<input type="radio" name="click">
<span>text 4</span>
</div>
</form>