<label for="programming_language">What's your favorite programming language?</label>
<input type="text" id="programming_language" list="languages" />
<datalist id="languages">
	<option value="JavaScript"></option>
	<option value="Python"></option>
	<option value="Java"></option>
	<option value="HTML">Stop being a troll</option>
</datalist>

<label for="pick_color">Pick a color</label>
<input type="color" id="pick_color" list="colors" />
<datalist id="colors">
	<option value="#155AF0"></option>
	<option value="#F107BA"></option>
	<option value="#2B2B2B"></option>
</datalist>
body {
	margin: 2.5rem;
	font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
	font-weight: 400;
	line-height: 1.5;
	color: #0a0a0a;
}

label {
	display: block;
	margin: 0;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.8;
	color: #0a0a0a;
}

input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 2.4375rem;
	margin: 0 0 1rem;
	padding: 0.5rem;
	border: 1px solid #cacaca;
	border-radius: 0;
	background-color: #fefefe;
	box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #0a0a0a;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.