Land of Joe
[CSS] 동그란 체크박스 만들기 본문
이런 동그란 체크박스를 만들고자 하였다.
태그는 input
타입은 checkbox
그리고 추가로
border-radius: 50% 까지 넣어줬는데 변화가 없어서 머리를 쥐어뜯었다. (아니다)
구글링 끝에 이런 글을 찾았고
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);
}
}
그나저나 더워 죽겠다...
'🌐 Web > 🔵 CSS | 💅 | 🌊' 카테고리의 다른 글
[CSS] align-content가 뭐야? (0) | 2023.12.28 |
---|---|
[CSS] 이용약관 전문 만들기 하면서 배운 것 (0) | 2023.08.02 |
[CSS] input 검색창 만들기 (button 이미지 삽입) (0) | 2023.05.08 |
[CSS] input 태그 검색창 만들기 (0) | 2023.04.02 |