라디오처럼

[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은 모양이 바뀌지 않습니다. 위 속성은 네이티브로 지원되는 모양들을 해제하거나 추가할 때 이용할 수 있으며 라디오처럼 둥글게 만들거나 커스텀 시..