HTML Checking sibling radio button is checked

Question

So i have this assignment where i need to make a custom radio button that if checked then a success logo come out.

i succeed to create the box but not the content i first though its the real radio button not working but after i turn up the opacity(i use opacity to hide the real one in case this didn't clear enough) the real radio button work. i try asking my senior he didn't really answer my question

here's the html

<label for="Viridian">      
    <span class="checkbox"></span>
     Viridian
    <input type="radio" id="Viridian" name="color" value="Viridian" checked="checked">
</label>

and here's the css

.checkbox {
    display: block;
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin-right: 2vh;
    border: solid 1px white;
}
    input ~ .checkbox::after {
    content: '';
    vertical-align: middle;
    font-size: 15px;
    text-align: center;
}
 input:checked ~ .checkbox::after {
    content: 'a';
}

the content a is just for the simulation – Ahmad Mahdi Apr 05 '20 at 09:05 — Ahmad Mahdi, Apr 05 '20 at 09:05

score 0 · Accepted Answer · edited Apr 13 '20 at 13:40

I think this is what you're looking for.

HTML:

 <p>
    <input type="radio" id="test3" name="radio-group">
    <label for="test3">Orange</label>
 </p>

CSS:

[type="radio"]: checked,
[type="radio"]: not(: checked) {
  position: absolute;
  left: -9999px;
}

[type="radio"]: checked+label,
[type="radio"]: not(: checked)+label {
  position: relative;
  padding - left: 28px;
  cursor: pointer;
  line - height: 20px;
  display: inline - block;
  color: #666;
}

[type="radio"]: checked+label: before,
[type="radio"]: not(: checked)+label: before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #ddd;
  border - radius: 100 %;
  background: #fff;
}

[type="radio"]: checked+label: after,
[type="radio"]: not(: checked)+label: after {
  content: '';
  width: 12px;
  height: 12px;
  background: #F87DA9;
  position: absolute;
  top: 4px;
  left: 4px;
  border - radius: 100 %;
  -webkit - transition: all 0.2s ease;
  transition: all 0.2s ease;
}

[type="radio"]: not(: checked)+label: after {
  opacity: 0;
  -webkit - transform: scale(0);
  transform: scale(0);
}

[type="radio"]: checked+label: after {
  opacity: 1;
  -webkit - transform: scale(1);
  transform: scale(1);
}

HTML Checking sibling radio button is checked

1 Answers1