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; // 보더와 컨텐츠 사이 빈공간 생성
}
`;
'프론트엔드 > CSS' 카테고리의 다른 글
[CSS] 파일 드래그 앤 드랍 기능 구현하기 (1) | 2024.08.08 |
---|---|
[CSS3] CSS 포커스 상태 유지시키기 (0) | 2024.07.31 |
[CSS] StyledComponents props 전달 방법 (0) | 2024.01.23 |
[CSS] 스크롤바 디자인 (0) | 2023.12.28 |
[CSS][React] 리액트 전체 화면 너비 높이 css 스타일링 설정 방법 (0) | 2023.12.24 |