<h1 style="font-size: 1.2rem;">Webkit Appearance Test</h1>
<p>테스트 목적: <code>border-radius: 0</code>, <code>input[type=search]</code>까지 적용 범위를 명시할 필요성 확인</p>
<p>
  <button type="button" onclick="changeClass('default-reset')">리셋1</button>
  <button type="button" onclick="changeClass('reset-with-border-radius')">리셋2</button>
  <button type="button" onclick="changeClass('reset-with-border-radius-and-type-search')">리셋3</button>
  <button type="button" onclick="changeClass('reset4')">리셋4</button>
  <button type="button" onclick="changeClass('reset5')">리셋5(추천)</button>
  <button type="button" onclick="changeClass('')">브라우저 스타일</button>
</p>
<ul>
  <li>리셋1: <code>input</code>, <code>button</code>, <code>textarea</code>, <code>select</code>에 <code>-webkit-appearance: none;</code> 적용</li>
  <li>리셋2: 리셋1에 더해 <code>border-radius: 0</code></li>
  <li>리셋3: 리셋2에 더해 선택자에 <code>input[type=search]</code>까지 추가</li>
  <li>리셋4: 리셋3에 더해 <code>color: black; background-color: #eee</code>까지 추가</li>
  <li><b>리셋5(추천):</b> <code>input, button, textarea, select</code>에는 <code>border-radius: 0</code>만 적용. <code>button</code>에 <code>-webkit-appearance: none;</code> 적용</li>
  <li>완전 리셋: <code>-webkit-appearance: none;</code>까지 제거해서 맨 처음으로 돌림</li>
</ul>

<div id="target">
  <p><input type="text" placeholder="type text"></p>
  <p><input type="search" placeholder="type search"></p>
  <p><input type="checkbox"> type checkbox</p>
  <p><input type="color"> type color</p>
  <p><input type="date"> type date</p>
  <p><input type="datetime-local"> type datetime-local</p>
  <p><input type="email" placeholder="type email"></p>
  <p><input type="month"> type month</p>
  <p><input type="number" placeholder="type number"></p>
  <p><input type="password" placeholder="type password"></p>
  <p><input type="radio"> type radio</p>
  <p><input type="range"> type range</p>
  <p><input type="tel" placeholder="type tel"></p>
  <p><input type="time"> type time</p>
  <p><input type="url" placeholder="type url"></p>
  <p><input type="week"> type week</p>

  <p><input type="file" placeholder="type file"></p>
  <p><select name="" id="">
      <option>select box</option>
    </select></p>
  <p><input type="submit" value="input type submit"></p>
  <p><input type="button" value="input type button"></p>
  <p><input type="reset" value="input type reset"></p>
  <p><button>No type button</button></p>
  <p><button type="button">button type button</button></p>
  <p><button type="submit">submit type button</button></p>
</div>

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

</ul>