type='radio' button 처럼 사용하기

 

문제

input 태그에 type='radio'를 사용하면 체크박스가 나오면 선택을 할 수 있다.

이 체크박스를 제거하고 버튼을 사용할 때와 비슷하게 radio를 구현하고자 하였다.

 

 

CSS 스타일링은 emotion을  사용하여 스타일하였다.

 

예제 코드

            <Label2>
              <InputGender
                type="radio"
                name="성별"
                value="MALE"
                onChange={oncChangeGender}
              />
              <span>남자</span>
            </Label2>
            <Label2>
              <InputGender
                type="radio"
                name="성별"
                value="FEMALE"
                onChange={oncChangeGender}
              />
              <span>여자</span>
            </Label2>

 

css

export const Label2 = styled.label`
  display: flex;
  align-items: center;
  justify-content: center;
  color: #969696;
  background-color: #ffffff;
  position: relative;
  box-sizing: border-box;
  box-shadow: 0 4px 4px 0 #00000040;
  border: 1px solid #969696;
  border-radius: 12px;
  width: 15rem;
  height: 3.5rem;
  outline: none;
  font-size: 1.3rem;
  padding: 10px 15px 12px;
  margin-top: 0.9rem;
  margin-bottom: 0.3rem;

  & input[type="radio"]:checked + span {
    color: black;
  }
`;

export const InputGender = styled.input`
  :focus {
    border: 1px solid gray;
  }
  ::placeholder {
    font-size: 1.3rem;
    font-weight: 200;
    color: #969696;
  }
  &[type="radio"] {
    display: none;
  }
`;

이런 스타일을 줘본적이 처음이라 처음에 굉장히 애를 먹었다. 

해결 방법은 input radio 버튼을 label로 감싼 후 span에 스타일을 적용시키는 방법으로 해결하였다.

구현 화면

 

초기 화면

클릭 시