input(checkbox, radio) 태그 커스텀!

radio

1. 기본 스타일의 input을 시각적으로 숨김처리를 해준다.
2. label 태그에 가상요소 before, after를 추가하여 새로운 radio를 생성한다.
3. input:checked, input:not(:checked) 를 통해 체크 전후의 디자인을 설정해준다.

• 위와 같은 기본 스타일에서 아래와 같은 scale 트랜지션을 준 커스텀 라디오를 만들어보겠다.

1. html 작성

 <div class="radio_wrap">
    <input id="custom_radio_1" type="radio" name="custom">
    <label for="custom_radio_1">
        <span>custom1</span>
    </label>
  </div>
  <div class="radio_wrap">
      <input id="custom_radio_2" type="radio" name="custom">
      <label for="custom_radio_2">
          <span>custom2</span>
      </label>
  </div>
  <div class="radio_wrap">
      <input id="custom_radio_3" type="radio" name="custom">
      <label for="custom_radio_3">
          <span>custom3</span>
      </label>
  </div>

2. css로 커스텀 시작.

/* (1) input 태그는 시각적으로 숨김처리를 해준다.*/
input{
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    line-height: 0;
    text-indent: -9999px;
}
label{
    cursor:pointer;
}
label span{
    padding-left:20px;
    vertical-align: baseline;
}
/* label 태그에 position 기준 설정 */
input[type='radio']:checked + label,
input[type='radio']:not(:checked) + label{
    position:relative;
    cursor:pointer;
}
/* label의 가상요소 before 생성. 기본 박스를 만든다. */
input[type='radio']:checked + label:before,
input[type='radio']:not(:checked) + label:before{
    position: absolute;
    top:0;
    left:0;
    content:'';
    display: block;
    width:14px;
    height:14px;
    box-shadow: 0 0 0 2px #000;
    border-radius: 50%;
}
/* label의 가상요소 after 생성. checked 상태일 때 들어갈 아이콘을 만든다. */
input[type='radio']:checked + label:after,
input[type='radio']:not(:checked) + label:after{
    position: absolute;
    top:2px;
    left:2px;
    content:'';
    display: block;
    width:10px;
    height:10px;
    background-color:#000;
    border-radius: 50%;
    transition: all 0.2s ease;
}
/* checked 상태가 아닐때 */
input[type='radio']:not(:checked) + label:after{
    opacity: 0;
    transform:scale(0);
}
/* checked 상태일 때. */
input[type='radio']:checked + label:after{
    opacity: 1;
    transform:scale(1);
}