[React.js] input checkbox css / 간단하게 checkbox css 구현 ( styled-components)

 

 

 

 

 

 

프로젝트 진행 도중 왼쪽 화면을 구현해야 했었다.

 

React.js로 styled-components방식을 사용하여 구현하였으며, 해당 페이지를 구현하면서 checkbox  css가 적용이 안되었던 문제와, 클릭했을 때 가운데에 원이 생기는 css를 간단하게 구현하는 것에 대해 말해보고자 한다.

 

 

 

 

 

 

 

 

 

 input checkbox css 

 

 1. CSS속성이 구현되지 않는 이유?

 

처음 checkbox의 css를 완성했을 때의 코드는 아래 더보기를 누르면 확인할 수 있다.

 

const CheckBoxStyled = styled.input`
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #d0d5dd;
  position: relative;
  transition: all 0.3s;

  &:checked {
    background-color: #ff6330;
    border: 1px solid #ff6330;
  }

  &:checked::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border: 3px solid white;
    border-radius: 50%;
    background-color: transparent;
    transform: translate(-50%, -50%);
  }
`;

 

 

왼쪽에서 보는 것과 같이 이상한 모양(?)을 나타내는 것을 볼 수 있다. 처음에는 내 css코드에 문제가 있다고 생각하여 오타를 찾아봤지만, 오타는 없었다.
checked와 before문제라고 하기에는 radius도 적용이 안되고 있었다.

 

'checkbox css적용 안됨' 이런식으로 인터넷에서 찾다 보면, 조금 돌고 돌긴 하지만, 검색으로 찾아본 결과 브라우저에서 기본적으로 제공하는 css성질이 현재 css코드를 덮어 씌운다는 것을 알 수 있었다.

 

이를 해결하기 위해 아래 3가지 기본 스타일 속성을 제거해줌으로 써 해결할 수 있었다. 

• 기본 스타일 제거

appearance: none;

• 웹킷 기반 브라우저 스타일 제거 ( Chrome, Safari)

-webkit-appearance: none;

• 모질라 브라우저 스타일 제거 ( FireFox)

-webkit-appearance: none;

 

 

 

 

2. checkbox 간단하게 꾸미기 /checkbox 선택시 가운데 원 생기게 하기 

 

 

checkbox에서 체크가 된 상태에 대한 설정은 :checked로 할 수 있다.
기본적으로 클릭 하였을 때 가운데 주황색 원이 나타나야 하기 때문에 체크했을 때 주황색을 표현하는 것으로 생각하기 쉽상이다. 

 

하지만 반대로 선택했을 때 흰색 부분을 지정하는 것이 훨씬 간편하다. :checked인 상태에서 ::before를 활용하는 것이다.

  &:checked::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border: 3px solid white;
    border-radius: 50%;
    background-color: transparent;
    transform: translate(-50%, -50%);
  }

 

::before는 요소의 콘텐츠 시작 부분에 생성되는 콘텐츠로  content=””를 통해 가짜 속성을 추가할 수 있는데,

이를 통해 가운데가 빈 3px border를 가진 흰색 고리를 생성하여 checked에 넣어주면 아래와 같이 완성있다.

 

 

 

See the Pen Untitled by 김도현 (@ogicrxrt-the-sasster) on CodePen.