CODEWITHSUNDEEP
htmlcss
KaiLee
KaiLee

Reputation: 51

why my CSS custom radio button doesn't work?

I try to make radio button by myself,But it doesn't work after I click label or the input radio button. my code as bellow.

.radio input[type="radio"] {
    display: none;
}

.radio {
    margin-left: 5px;
    position: relative;
    padding-left: 22px;
}

.radio span {
    width: 18px;
    height: 18px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    position: absolute;
    display: inline-block;
    left: 0;
    top: 5px;
}

.radio span::after {
    content: "";
    width: 16px;
    height: 16px;
    background-color: #448899;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
}

.radio input[type="radio"]:checked ~ .radio span::after {
    transform: translate(-50%, -50%) scale(1);
}
<label class="radio">
    <span></span><input type="radio" name="time" value="2000" id="morning" required />
    上半天
</label>
<label class="radio">
    <span></span><input type="radio" name="time" value="2500" id="afternoon" />
    下半天
</label>

Even if I connect radio checked to another element,it still doesn't work.

Upvotes: 1

Views: 337

Answers (1)

Onur Sabanoglu
Onur Sabanoglu

Reputation: 44

Update the code as follows.

.radio {
      display: flex;
      align-items: center;
      margin-left: 5px;
      position: relative;
      padding-left: 22px;
      margin-bottom: 10px;
      cursor: pointer;
    }

    .radio input[type="radio"] {
      position: absolute;
      opacity: 0;
      z-index: -1;
    }

    .radio span {
      width: 18px;
      height: 18px;
      background-color: rgba(255, 255, 255, 1);
      border: 1px solid  #484848;
      border-radius: 50%;
      position: absolute;
      display: inline-block;
      left: 0;
    }

    .radio span::after {
      content: "";
      width: 16px;
      height: 16px;
      background-color: #448899;
      border-radius: 50%;
      display: inline-block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
    }

    .radio input[type="radio"]:checked ~ span::after {
      transform: translate(-50%, -50%) scale(1);
    }
<label class="radio">
    <input type="radio" name="time" value="2000" id="morning" required />
    <span></span>
    上半天
  </label>
  <label class="radio">
    <input type="radio" name="time" value="2500" id="afternoon" />
    <span></span>
    下半天
  </label>

Upvotes: 1

Related Questions