radio
type="radio" 는 checkbox 와 비슷하지만
checkbox 는 여러개를 중복 선택하지만
radio 는 여러 항목중 한개를 선택할 수 있는 type 이다.
checkbox 처럼 체크박스 모양으로 보여지는데
display:none 으로 가리고
label, span 으로 버튼 모양의 선택지로 나타낼 수 있다.
const LevelCheckLabel = styled.label`
width: 40px;
height: 40px;
float: left;
margin-left: 5px;
`;
const LevelCheckSpan = styled.span`
font-size: 18px;
width: 36px;
height: 36px;
background: ${(props) =>
props.children === '상'
? '#0DF0AC'
: props.children === '중'
? '#89F9D7'
: '#CBFFEF'};
border-radius: 50%;
border: none;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
color: black;
`;
const LevelCheckRadio = styled.input.attrs({ type: 'radio' })`
&:checked {
display: inline-block;
background: none;
text-align: center;
display: none;
}
&:checked + ${LevelCheckSpan} {
scale: 1.1;
}
display: none;
`;
styled-components 로 만들어 보았다.
checkRadio 는 보여지는 것은 싹다 none 처리하고
체크 되었을 때만 특정 색으로 변하거나 scale을 주어 선택 된 것을 확인시켜준다.