[React] input radio, checkbox 커스텀하기 with Styled-components

Today, What I learned?

UI를 먼저 작업하면서 input 태그 중 체크박스와 라디오버튼을 커스텀해야겠다 생각이 들었는데,

기본적으로 잡혀있는 UI를 날리면서 어떻게 디자인대로 구현할 것인지에 대한 삽질 시간이 좀 길었다.

결론적으로 커스텀에 성공했고 어떻게 해놓았는지 기록해보려 한다!..

우리 프로젝트는 이모션을 쓰고 있지만 Styled-components 형식과 동일하게 사용 중이라는 점..

 

 

input type='radio'

완성된 모습은 이렇다.

어떻게 커스텀을 할 것이냐? 라벨의 htmlFor와 인풋의 name이 동일할 경우 라벨을 누르기만 해도 인풋이 동작된다는 점을 이용할 것이다.

완성된 모습

 

 

 {career.map((career) => (
              <CareerRadioBox key={career.value}>
                <InfoRadioBoxInput
                  type="radio"
                  id={career.id}
                  name={career.value}
                />
                <InfoCheckBoxLabel htmlFor={career.id}>
                  <InfocCheckBoxSpan>{career.name}</InfocCheckBoxSpan>
                </InfoCheckBoxLabel>
              </CareerRadioBox>
))}

여기서 중요한 것은 라디오 버튼은 name 값이 같아야 한 묶음으로 처리가 된다는 것!

 

Styled-components의 CSS 코드를 보면 이렇다.

아래 코드는 원래의 인풋을 보이지 않는 것처럼 멀리 보내버리고, 체크가 되었을 경우 라벨의 배경색, 글자색을 변경해주고 있다.

인풋태그를 display:none 처리도 해보았지만 동작이 안되어서 지금까진 이 방법이 최선같다.

const InfoRadioBoxInput = styled.input`
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;

  &:checked + label {
    background-color: ${COLORS.violetB400};
    color: ${COLORS.white};
  }
`;

 

 

 

input type='checkbox'

완성된 모습

 

체크박스도 라디오버튼과 비슷하다.
동일하게 라벨을 이용하고, 인풋의 id와 라벨의 htmlFor를 같은 값을 준다.

...
  <CheckBoxWrapper key={type}>
      <CheckBoxInput type="checkbox" id={type} name="skills" />
      <CheckboxLabel htmlFor={type}>
        <CheckBoxText>{name}</CheckBoxText>
      </CheckboxLabel>
 </CheckBoxWrapper>

 

 

CSS 준 방식도 위와 동일함..

const CheckBoxInput = styled.input`
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;

  &:checked + label {
    background-color: ${COLORS.violetB400};
    color: ${COLORS.white};
  }
`;

const CheckboxLabel = styled.label`
  padding: 0.5rem 1rem;
  height: 2.25rem;
  cursor: pointer;
  border-radius: 2rem;
  background-color: #f2f4f6;
  font-size: 0.75rem;
  color: #383838;
`;

 

 

커스텀하느라 약간 삽질했지만 나중에도 유용하게 사용해 볼 수 있을 것 같다!