<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>

<small><p>Question of the week from Cassidoo's Newsletter. <a href="https://buttondown.email/cassidoo/archive/when-youre-accustomed-to-privilege-equality-feels/" target="_blank" rel="noopener">Go subscribe!</a></small></p>
/* Display only. Not needed! */

@import 'https://raw.githubusercontent.com/jonathantneal/system-font-css/gh-pages/system-font.css';

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

h1 {
	font-weight: normal;
}

a {
  color: inherit;
}

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

input {
  font: inherit;
  padding: 0.2em 0.5em;
}
// Not needed!

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.