-2

this is what I want it to be

this is what it looks now

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>

2
  • 2
    Welcome to Stack Overflow! Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking.
    – Paulie_D
    May 14, 2021 at 10:14
  • 1
    I don't see the element with class="container" in your HTML. Please change that. May 14, 2021 at 12:55

1 Answer 1

0
`<form action="#">
        <div class="box box1">
          <label for="click1">text 1</label>
          <input type="radio" name="click" id="click1">
        </div>
        <div class="box box2">
          <label for="click2">text 2</label>
          <input type="radio" name="click" id="click2">
        </div>
        <div class="box box3">
          <label for="click3">text 3</label>
          <input type="radio" name="click" id="click3">
        </div>
        <div class="box box4">
          <label for="click4">text 4</label>
          <input type="radio" name="click" id="click4">
        </div>
      </form>`

Always use the LABEL tag when dealing with forms. when we put the label next to for = "radio ID", when clicked it marks the radio

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.