Input의 radio 속성

멜론쿵야65 웹개발·2024년 5월 5일
0

1. 라디오에 동그라미 없애기

목록 중 하나를 선택해야하는 폼을 만드는데, 그냥 쭉 리스트로 만들고 이벤트 핸들러로 해보려다가 여러가지 생각해야될게 많아져가주구 라디오를 활용해보기로 했다.
근데 요구사항내용 상 기본적으로 들어있는 동그라미를 없애야 돼서 어떻게 없애는지 찾아봤다.
그리고 value관리도 편하고, checked스타일도 지정하기 편해져서 좋은듯


css에서 처리

input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  border-radius: 0;
  outline: none;
}

2. checked 가상 요소

css에서 checked 가상요소로 여부 확인해 input태그 스타일 지정해줄 수 있다. 근데 나는 연산자써서 함

3. checked 속성

<input
  type="radio"
  value={item.name}
  id={i}
  checked={selectedFolder === item.name}
  onChange={handleRadioChange}
/>
  • checked로 선택됐는지 안됐는지 확인할 수 있다.
  • 이거 이렇게 설정 안하면 선택되어서 checked가 true가 된 선택지를 다시 선택할 수 없게 됨
  • checked가 false인것만 선택할 수 있나봐용 ^_T

0개의 댓글

관련 채용 정보