Webkit Appearance Test

테스트 목적: border-radius: 0, input[type=search]까지 적용 범위를 명시할 필요성 확인

리셋1 리셋2 리셋3 리셋4 리셋5(추천) 브라우저 스타일

• 리셋1: input, button, textarea, select에 -webkit-appearance: none; 적용
• 리셋2: 리셋1에 더해 border-radius: 0
• 리셋3: 리셋2에 더해 선택자에 input[type=search]까지 추가
• 리셋4: 리셋3에 더해 color: black; background-color: #eee까지 추가
• 리셋5(추천): input, button, textarea, select에는 border-radius: 0만 적용. button에 -webkit-appearance: none; 적용
• 완전 리셋: -webkit-appearance: none;까지 제거해서 맨 처음으로 돌림

• border-radius: 0은 필요하다.
  • 리셋1만으로는 iOS에서 입력 필드들의 border-radius가 남는다.
  • 리셋1만으로는 iOS에서 input 태그 버튼의 border-radius가 남는다.
• 적용할 type 명시도 필요해 보인다.
  • input type이나 button별로 다른 접근을 취해야 할 듯하다. 예컨대 type radio, checkbox, range는 appearance: none이 능사는 아니다.