프론트엔드/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; // 보더와 컨텐츠 사이 빈공간 생성
  }
`;