<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>外观测试</title>
  <style>
    body {
      margin: 20px auto;
      max-width: 800px;
      justify-content: space-around;
    }

    body, form > div {
      display: flex;
    }

    form > div {
      margin-bottom: 20px;
    }

    .appearence input {
      -webkit-appearance: none;
      appearance: none;
    }
  </style>
</head>

<body>
  <div>
    <form>
      <div>
        <label for="search1">搜索：</label>
        <input id="search1" name="search1" type="search">
      </div>
      <div>
        <label for="text1">文本：</label>
        <input id="text1" name="text1" type="text">
      </div>
      <div>
        <label for="date1">日期：</label>
        <input id="date1" name="date1" type="datetime-local">
      </div>
      <div>
        <label for="radio1">收音机按钮：</label>
        <input id="radio1" name="radio1" type="radio">
      </div>
      <div>
        <label for="checkbox1">单选按钮：</label>
        <input id="checkbox1" name="checkbox1" type="checkbox">
      </div>
      <div><input type="submit" value="提交"></div>
      <div><input type="button" value="按钮"></div>
    </form>
  </div>
  <div class="appearence">
    <form>
      <div>
        <label for="search2">搜索</label>
        <input id="search2" name="search2" type="search">
      </div>
      <div>
        <label for="text2">文本：</label>
        <input id="text2" name="text2" type="text">
      </div>
      <div>
        <label for="date2">日期：</label>
        <input id="date2" name="date2" type="datetime-local">
      </div>
      <div>
        <label for="radio2">收音机按钮：</label>
        <input id="radio2" name="radio2" type="radio">
      </div>
      <div>
        <label for="checkbox2">单选按钮：</label>
        <input id="checkbox2" name="checkbox2" type="checkbox">
      </div>
      <div><input type="submit" value="提交"></div>
      <div><input type="button" value="按钮"></div>
    </form>
  </div>
</body>

</html>
