<div class="wrapper">
  <h3>Datalist for type="text"</h3>
  <div class="control">
    <label for="lang">语言：</label>
    <input type="text" list="language" name="name" id="lang">
    <datalist id="language">
      <option value="css">CSS</option>
      <option value="html">HTML</option>
      <option value="javascript">JavaScript</option>
      <option value="react">React</option>
      <option value="vue">Vue</option>
    </datalist>
  </div>

</div>
<div class="wrapper">
  <h3>Datalist for type="color"</h3>
  <div class="control">
    <label for="color">颜色：</label>
    <input type="color" id="color" list="colors" />
    <datalist id="colors">
      <option value="red">red</option>
      <option value="blue">blue</option>
      <option value="green">green</option>
      <option value="orange">orange</option>
      <option value="yellow">yellow</option>
      <option value="lime">lime</option>
    </datalist>
  </div>
</div>
<div class="wrapper">
  <h3>Datalist for type="range"</h3>
  <label for="donation">金额：</label>
  <input type="range" name="donation" id="donation" list="donation_list" step="5" min="0" max="200" />
  <datalist id="donation_list">
    <option value="0">0</option>
    <option value="25">25</option>
    <option value="50">50</option>
    <option value="75">75</option>
    <option value="100">100</option>
    <option value="125">125</option>
    <option value="150">150</option>
    <option value="175">175</option>
    <option value="200">200</option>
  </datalist>
</div>

@import url("https://fonts.googleapis.com/css?family=Gochi+Hand");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  background-color: #291642;
  font-family: "Gochi Hand", sans-serif;
  color: #fff;
  font-size: 130%;
  letter-spacing: 0.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  min-height: 100vh;
}

.wrapper {
  margin: 2vh;
  display: flex;
  flex-direction: column;
  border: 1px solid #fefefe;
  padding: 3vh;
  border-radius: 2vh;
  box-shadow: 0 0 6vh rgba(0, 0, 0, 0.25);
  min-width: 30vw;
  min-height: 30vh;

  h3 {
    margin-bottom: 6vh;
  }

  label {
    font-size: 14px;
    display: block;
    margin-bottom: 2vh;
  }
}