:checked style for custom radio input

Issue

I'm trying to create a custom radio input, and I can't make a checked condition.

I hid the standard radio input and created my own with the .fake class and the :after pseudo-element. The :after pseudo-element defaults to opacity: 0;

My goal is that if you click anywhere in the <label> input becomes checked and the :after pseudo-element is given an opacity: 1;

This is a link to codepen for your convenience, which shows what I want.

Runnable code

span {
  font-size: 2rem;
}

.radio__item {
  display: flex;
  max-width: 360px;
  width: 100%;
  padding: 10px;
  align-items: center;
  background: #F3F6F9;
  position: relative;
}

.radio__input {
  display: none;
}

.radio__input:checked+.fake:after {
  opacity: 1;
}

.fake {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: 1px solid #EF5B0C;
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translate(0, -50%);
}

.fake:after {
  position: absolute;
  content: '';
  width: 20px;
  height: 20px;
  background: #EF5B0C;
  border-radius: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.text {
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 22px;
  margin-left: 30px;
  color: #003865;
  ;
}

.img {
  width: 60px;
  height: 60px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.img svg {
  max-width: 100%;
  width: 100%;
  height: auto;
}


/*How it should look..*/

.fake-correct {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: 1px solid #EF5B0C;
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translate(0, -50%);
}

.fake-correct:after {
  position: absolute;
  content: '';
  width: 20px;
  height: 20px;
  background: #EF5B0C;
  border-radius: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}

.item-correct {
  border: 1px solid #EF5B0C;
  background: white;
}

<span>How it looks now</span>
<lavel class="radio__item">
  <input type="radio" class="radio__input" name="radio">
  <div class="fake"></div>
  <div class="img">
    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.6667 16.6667H28.3333V23.3334H11.6667V16.6667Z" fill="#003865"/>
<path d="M20 3.33337C10.81 3.33337 3.33334 10.81 3.33334 20C3.33334 29.19 10.81 36.6667 20 36.6667C29.19 36.6667 36.6667 29.19 36.6667 20C36.6667 10.81 29.19 3.33337 20 3.33337ZM20 33.3334C12.6483 33.3334 6.66668 27.3517 6.66668 20C6.66668 12.6484 12.6483 6.66671 20 6.66671C27.3517 6.66671 33.3333 12.6484 33.3333 20C33.3333 27.3517 27.3517 33.3334 20 33.3334Z" fill="#003865"/>
  </svg>
  </div>
  <div class="text">Choose me</div>
  <div class="border"></div>
</lavel>
<br>
<br>
<br>
<br>
<br>
<br>
<span>How it should look after the user clicks anywhere inside the label.</span>

<lavel class="radio__item item-correct">
  <input type="radio" class="radio__input input-correct" name="radio">
  <div class="fake-correct"></div>
  <div class="img">
    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.6667 16.6667H28.3333V23.3334H11.6667V16.6667Z" fill="#003865"/>
<path d="M20 3.33337C10.81 3.33337 3.33334 10.81 3.33334 20C3.33334 29.19 10.81 36.6667 20 36.6667C29.19 36.6667 36.6667 29.19 36.6667 20C36.6667 10.81 29.19 3.33337 20 3.33337ZM20 33.3334C12.6483 33.3334 6.66668 27.3517 6.66668 20C6.66668 12.6484 12.6483 6.66671 20 6.66671C27.3517 6.66671 33.3333 12.6484 33.3333 20C33.3333 27.3517 27.3517 33.3334 20 33.3334Z" fill="#003865"/>
  </svg>
  </div>
  <div class="text">Choose me</div>
  <div class="border"></div>
</lavel>

Solution

You're almost there. You just need to update elements lavel to label which is paired with radio.

span {
  font-size: 2rem;
}

.radio__item {
  display: flex;
  max-width: 360px;
  width: 100%;
  padding: 10px;
  align-items: center;
  background: #F3F6F9;
  position: relative;
}

.radio__input {
  display: none;
}

.radio__input:checked+.fake:after {
  opacity: 1;
}

.fake {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: 1px solid #EF5B0C;
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translate(0, -50%);
}

.fake:after {
  position: absolute;
  content: '';
  width: 20px;
  height: 20px;
  background: #EF5B0C;
  border-radius: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.text {
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 22px;
  margin-left: 30px;
  color: #003865;
  ;
}

.img {
  width: 60px;
  height: 60px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.img svg {
  max-width: 100%;
  width: 100%;
  height: auto;
}

<span>How it looks now</span>
<label class="radio__item">
  <input type="radio" class="radio__input" name="radio">
  <div class="fake"></div>
  <div class="img">
    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.6667 16.6667H28.3333V23.3334H11.6667V16.6667Z" fill="#003865"/>
<path d="M20 3.33337C10.81 3.33337 3.33334 10.81 3.33334 20C3.33334 29.19 10.81 36.6667 20 36.6667C29.19 36.6667 36.6667 29.19 36.6667 20C36.6667 10.81 29.19 3.33337 20 3.33337ZM20 33.3334C12.6483 33.3334 6.66668 27.3517 6.66668 20C6.66668 12.6484 12.6483 6.66671 20 6.66671C27.3517 6.66671 33.3333 12.6484 33.3333 20C33.3333 27.3517 27.3517 33.3334 20 33.3334Z" fill="#003865"/>
  </svg>
  </div>
  <div class="text">Choose me</div>
  <div class="border"></div>
</label>

Answered By - Nick Vu