SOURCE

// Not needed!

<!--
  Question of the week from Cassidoo's Newsletter.
  Go subscribe! https://cassidoo.co/newsletter/
-->

<h1>Combobox</h1>
<p>A fixed list combo box is when a user can type a certain string, and there is a list of strings that is designed to help the user arrive at a value. Try it out!</p>

<input type="text" name="fruit" list="fruits" autocomplete="off" />
<datalist id="fruits">
  <option>Apple</option>
  <option>Banana</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Kiwi</option>
</datalist>

/* Display only. Not needed! */

body {
  background: dodgerblue linear-gradient(45deg, aqua, dodgerblue, deeppink) fixed;
	color: white;
  font: normal 32px/1.6 sans-serif;
	text-shadow: 0 1px 1px hsl(0 0% 0% / 20%);
  margin: 3rem;
}

a {
  color: inherit;
}

a:focus,
a:hover {
  text-decoration-color: black;
}

input {
  font: inherit;
  padding: 0.2em 0.5em;
}