[HTML/CSS] 라디오 버튼 이미지 처리하기 (radio 버튼 커스텀)

 

 

🌵 HTML

<ul>
  <li class="rdo-group">
    <span>라디오 버튼1</span>
    <input type="radio" name="listRdovisible" id="listRdoShow1" />
    <label for="listRdoShow1"></label>
  </li>
  <li class="rdo-group">
    <span>라디오 버튼2</span>
    <input type="radio" name="listRdovisible" id="listRdoShow2" />
    <label for="listRdoShow2"></label>
  </li>
</ul>

 

🌵 CSS

.rdo-group{
  position:relative;
  display:flex;
  align-items: center;
  width:300px;
  height:40px;
}

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

input[type="radio"]+label  {
  position: absolute;
  display: block;
  left: 50%;
  width: 20px;
  height: 20px;
  background: url('https://github.com/hy0ni/library/assets/99204321/87fb372e-3217-418a-864b-d2d26610bb0b') no-repeat;
  background-size: 100%;
  cursor: pointer;
}

input[type="radio"]:checked+label{
  background: url('https://github.com/hy0ni/library/assets/99204321/bcccfaac-62cf-4691-b3d1-47a33e0097e3') no-repeat;
  background-size: 100%;
}

기존 radio버튼을 display:none으로 없애고

라디오 버튼 이미지를 가져와 label태그에 이미지 처리를 해줍니다.

 

이미지는 checked 안 되어 있을 때 이미지와 checked 했을 때 이미지 총 두 개의 이미지가 필요합니다.

 

See the Pen radio button image by hy0ni (@hy0ni) on CodePen.