<!DOCTYPE html>
<html>
<head>
  <meta charset = "utf-8">
  <title>时间示例</title>
  <style>
    div {
      margin-bottom: 10px;
      position: relative;
    }

    input[type="number"] {
      width: 100px;
    }

    input + span {
      padding-right: 30px;
    }

    input:invalid+span:after {
      position: absolute;
      content: '✖';
      padding-left: 5px;
    }

    input:valid+span:after {
      position: absolute;
      content: '✓';
      padding-left: 5px;
    }
  </style>
</head>
<body>
  <form>
    <div>
      <label for="appt-time">选择预约时间（12:00 至 18:00 之间）：</label>
      <input id="appt-time" type="time" name="appt-time"
              min="12:00" max="18:00" required>
      <span class="validity"></span>
    </div>
    <div>
      <input type="submit" value="提交">
    </div>
  </form>
</body>
</html>
