Custom Input Radio

input 의 타입중 radio 는 브라우저마다 기본 스타일이 다르게 보여집니다. 

그리고 일반적인 css 스타일을 적용해서는 원하는대로 스타일을 바꾸기가 어렵습니다. 

때문에 label 과 input 이 가진 특성을 활용하면 커스텀한 라디오를 만들 수 있습니다.

<div class="wrap">
    <div>
      <input id="custom1" type="radio" name="custom" value="custom1" />
      <label class="circle" for="custom1"></label>
      <label class="text" for="custom1">text</label>
    </div>
    <div>
      <input id="custom2" type="radio" name="custom" value="custom2" />
      <label class="circle" for="custom2"></label>
      <label class="text"  for="custom2">text2</label>
    </div>
    <div>
      <input id="custom3" type="radio" name="custom" value="custom3" />
      <label class="circle" for="custom3"></label>
      <label class="text"  for="custom3">text3</label>
    </div>
  </div>

 

 

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

div {
  display: flex;
  align-items: center;
  gap: 5px;
}

label {
  cursor: pointer;
}

.circle {
  width: 20px;
  height: 20px;
  border: 2px solid #cccccc;
  display: block;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle::after {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 14px;
}

input[type=radio]:checked + .circle::after {
  background: red;
}

input[type=radio]:checked ~ .text {
  color: red;
}

 

 

const wrap = document.querySelector('.wrap')
wrap.addEventListener('change', (e) => {
  console.log(e.target.value)
})

 

스크립트코드는 선택한 라디오의 값을 가져오는 코드입니다. 

이벤트 버블링의 특성을 활용하여 이벤트 위임형식으로 만들었습니다. 

이벤트 바인딩을 부모에만 걸어 코드의 양을 줄이고 메모리도 절약할 수 있습니다.