CSS 커스텀 라디오 버튼

 

 

javascript 없이 css로만 커스텀 라디오 버튼 만들기

 

 

 

custom radio html

<input type="radio" name="custom_radio" id="customRadio01" checked>
<label for="customRadio01"></label>

<input type="radio" name="custom_radio" id="customRadio02">
<label for="customRadio02"></label>

 

 

custom radio css (효과 O)

[type="radio"]:checked,
[type="radio"]:not(:checked) { /* input 태그 숨기기 */
  position: absolute;
  left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label {
  position: relative;
  padding-left: 28px; /* padding은 label 영역 */
  cursor: pointer;
  line-height: 20px;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before { /* before가 테두리 */
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 2px solid steelblue;
  border-radius: 100%;
  background: #fff;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after { /* after는 테두리 안의 원 */
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  width: 10px;
  height: 10px;
  background: steelblue;
  border-radius: 100%;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after { /* 테두리 안의 원 선택되기 전 */
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}
[type="radio"]:checked + label:after { /* 테두리 안의 원 선택 */
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

인접 선택자(+)를 사용했기 때문에 html 태그 위치 주의하기

[type="radio"] + label  = 타입이 라디오인 태그 바로 뒤에오는 label 태그 선택

 

 

 

 

선택 시 나오는 테두리 안의 원이 점점 커지는 형태의 애니메이션을 주기 위해 opacity와 scale 사용

애니메이션 없을 시엔 아래와 같이 사용

custom radio css (효과 X)

[type="radio"]:checked,
[type="radio"]:not(:checked) {
  position: absolute;
  left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  line-height: 20px;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 2px solid steelblue;
  border-radius: 100%;
  background: #fff;
}
[type="radio"]:checked + label:after {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  width: 10px;
  height: 10px;
  background: steelblue;
  border-radius: 100%;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}

 

 

 

 

결과

custom radio