[팀 프로젝트] Input - Check Box 디자인

디자이너 님이 만들어주신 와이어프레임 처럼 Input의 Check Box 디자인을 바꾸려고 Border-Radius 속성을 줬는데 적용이 안됬다

div 태그 같은 경우에는 Border-Radius 속성만 적용시켜도 모서리를 둥글게 할 수 있었는데
input 태그는 appearance-none 속성을 적용시켜야 변경이 가능했다

• 각 브라우저는 체크박스에 기본 스타일을 적용하는데, 이 기본 스타일을 제거하지 않으면 CSS로 체크박스 모양을 커스터마이징하기 어렵다

<input
	type="checkbox"
	name="html_css"
	id=""
	className="
    	w-5 h-5 appearance-none border-2
    	border-black-300 rounded-full checked:bg-blue-600
        checked:border-transparent focus:outline-none"
/>