[CSS] checkbox 둥글게 만들기

 

코드

input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1px solid #999;
    appearance: none;
    cursor: pointer;
    transition: background 0.2s;
  }

  input[type="checkbox"]:checked {
    background: #32e732;
    border: none;
  }

반응형

코드 풀이

해당 코드의 핵심은 appearance 속성입니다.

그냥 border-radius 속성을 적용할 시 checkbox 타입을 가진 input은 모양이 바뀌지 않습니다.

 

위 속성은 네이티브로 지원되는 모양들을 해제하거나 추가할 때 이용할 수 있으며 라디오처럼 둥글게 만들거나 커스텀 시킬 때 사용합니다.

 

지금은 네이티브로 지정된 모양(checkbox)을 해제하기 위해 사용했습니다.

하지만 위 속성을 사용할 시 체크가 되었을 때의 모양도 사라지기에 체크가 되었을 때의 속성을 지정해 줘야 합니다.