[CSS]이모션-체크박스, 라디오 버튼 커스터마이징 하기

-webkit-appearance
-moz-appearance
appearance: none;

을 무력화 시켜서 적용하는 법을 찾음

체크 박스

import styled from '@emotion/styled';
import { css } from '@emotion/react';
import { color, grad } from '../../styles/color';

const checkboxStyle = css`
  -webkit-appearance: none; /* 웹킷 브라우저에서 기본 스타일 제거 */
  -moz-appearance: none; /* 모질라 브라우저에서 기본 스타일 제거 */
  appearance: none; /* 기본 브라우저에서 기본 스타일 제거 */
  width: 18px;
  height: 18px;
  border: 2px solid ${color.gray200}; /* 체크되지 않았을 때의 테두리 색상 */
  border-radius: 10px; /* 체크박스 모서리 둥글게 하기 */
  outline: none; /* focus 시에 나타나는 기본 스타일 제거 */
  cursor: pointer;

  &:checked {
    background-color: ${color.primary100}; /* 체크 시 내부 색상 */
    border-color: ${color.primary100}; /* 체크 시 테두리 색상 */
    box-shadow: 0 0 0 1px ${color.primary100}; /* 체크 시 외곽 라인 */
  }
`;

const CheckboxInput = styled.input`
  ${checkboxStyle}
`;

라디오 버튼

const radioStyle = css`
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid ${color.gray200};
  border-radius: 50%;
  outline: none;
  cursor: pointer;

  &:checked {
    background-color: ${color.primary100};
    box-shadow: 0 0 0 1px #111;
  }
`;

const RadioInput = styled.input`
  ${radioStyle}
`;