[CSS] 동그란 체크박스 만들기

이런 동그란 체크박스를 만들고자 하였다.

태그는 input

타입은 checkbox

 

그리고 추가로 

border-radius: 50% 까지 넣어줬는데 변화가 없어서 머리를 쥐어뜯었다. (아니다)

 

구글링 끝에 이런 글을 찾았고

[CSS] checkbox 둥글게 만들기

 

appearance: none;

이게 핵심임을 알게되었다!!

 

내가 작성한 코드는 다음과 같다

 

input {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 2px solid rgba(177, 177, 177, 1);
  cursor: pointer;
  appearance: none;

  &:checked {
    border-color: transparent;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: 50%;
    background-repeat: no-repeat;
    background-color: rgba(255, 192, 0, 1);
  }
}

 

 

 

그나저나 더워 죽겠다...