프론트엔드/CSS
체크박스 스타일링
순코딩
2024. 5. 17. 22:44
const StyledRadio = styled.input.attrs({ type: 'checkbox' })`
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border: 2px solid #ccc;
border-radius: 50%;
outline: none;
cursor: pointer;
&:checked {
background-color: #22d3ee; // 체크 시 원형 색깔
background-clip: content-box; //컨텐츠 영역만 색칠(원래는 컨텐츠+패딩 색칠)
padding:2px; // 보더와 컨텐츠 사이 빈공간 생성
}
`;