:checked style for custom radio input-CodePudding

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 >
  <input type="radio"  name="radio">
  <div ></div>
  <div >
    <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 >Choose me</div>
  <div ></div>
</lavel>
<br>
<br>
<br>
<br>
<br>
<br>
<span>How it should look after the user clicks anywhere inside the label.</span>

<lavel >
  <input type="radio"  name="radio">
  <div ></div>
  <div >
    <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 >Choose me</div>
  <div ></div>
</lavel>

CodePudding user response：

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 >
  <input type="radio"  name="radio">
  <div ></div>
  <div >
    <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 >Choose me</div>
  <div ></div>
</label>