URL control w/ datalist

The datalist turns the input into a combo box. Use arrows to navigate the list items

by kleinejan

HTML

<form>
  <label for="url">Enter URL:</label> 
  <input type="url" id="url" list="urllist" placeholder="Enter URL including HTTP://" /> 
  <datalist id="urllist"> 
    <option value="http://www.bing.com/" label="Bing"></option> 
    <option value="http://dev.microsoftedge.com/" label="Microsoft Edge Developer"></option> 
    <option value="http://dev.microasdasdasdsoftedge.com/" label="Microsoft Edge D111eveloper"></option> 
  </datalist> 
</form>

CSS

* {
  margin: 0;
  padding: 0;
}

html {
  font: 62.5% "segoe ui", helvetica, arial, sans-serif;
  background-color: #eee;
  margin: 2rem;
}

body, input {
  font-size: 2.6rem;
}

p { 
  font-size: 1.6rem;
}

input {
  display: block;
  width: 80%;
  margin: 1.6rem 0;
  border: 2px solid #555;
  padding: .8rem 1.2rem;
}

input:focus {
  outline: 2px solid cornflowerblue;
}