Галочка при выборе radio input

Question

Как добавить галочку как на скриншоте, которая появляется при выборе radio. Исходя из моего кода. Новичок и элементарные вещи очень с трудом даются.

[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

[type=radio]:checked + img {
  box-shadow: 0px 0px 15px black;
  
}

[type=radio] + img {
  cursor: pointer;
   border-radius: 5px;
  color: black;
  border: 0.5px solid #DCDCDC;
 }
 
 .roat {
display: flex;
flex-direction: row;
justify-content: flex-start;
padding: 30px;
}

.right {
margin-left: 30px;
}

<div class="roat">

  <div class="left">
    <label>
      <input type="radio" id="radio1" name="colour" value="pr" checked>
      <img src="https://thumb.tildacdn.com/tild6639-6462-4562-b134-656433333831/-/resize/592x/-/format/webp/tilda-prog.png" width="110" height="110"></label>
    <div class="div-block-info w-clearfix">
      <div class="min">ПРОГУЛКА</div>
    </div>
  </div>

  <div class="right">
    <label>
      <input type="radio" id="radio2" name="colour" value="ex">
      <img src="https://thumb.tildacdn.com/tild3763-3764-4038-b433-646464306335/-/resize/658x/-/format/webp/tilda-extr.png" width="110" height="110">
    </label>
    <div class="div-block-info w-clearfix">

      <div class="max">ЭКСТРИМ</div>
    </div>
  </div>
</div>

Answer 1

Можно реализовать при помощи postiton: relative, postiton: absolute, а так же ::before

Answer 2

label{position:relative;display:block;}
[type=radio] + div:after {
  content:'';
  position:absolute;
  background:#ff0000;
  width:24px;
  height:24px;
  left:-6px;
  top:-6px;
  border-radius:50%;
  opacity:0;
}
[type=radio]:checked + div:after {
  opacity:1;
  
}
[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

[type=radio]:checked + div img {
  box-shadow: 0px 0px 15px black;
  
}

[type=radio] + div img {
  cursor: pointer;
   border-radius: 5px;
  color: black;
  border: 0.5px solid #DCDCDC;
 }
 
 .roat {
display: flex;
flex-direction: row;
justify-content: flex-start;
padding: 30px;
}

.right {
margin-left: 30px;
}

<div class="roat">
  <div class="left">
    <label>
      <input type="radio" id="radio1" name="colour" value="pr" checked>
      <div>
      <img src="https://thumb.tildacdn.com/tild6639-6462-4562-b134-656433333831/-/resize/592x/-/format/webp/tilda-prog.png" width="110" height="110">
      </div>
    </label>
    <div class="div-block-info w-clearfix">
      <div class="min">ПРОГУЛКА</div>
    </div>
  </div>

  <div class="right">
    <label>
      <input type="radio" id="radio2" name="colour" value="ex">
      <div><img src="https://thumb.tildacdn.com/tild3763-3764-4038-b433-646464306335/-/resize/658x/-/format/webp/tilda-extr.png" width="110" height="110">
      </div>
    </label>
    <div class="div-block-info w-clearfix">

      <div class="max">ЭКСТРИМ</div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Галочка при выборе radio input

Ответы (2 шт):