URL control w/ Name & Desc

Accessible name comes from label. Description comes from placeholder.

by David Storey

HTML

<form>
  <label for="url">Your Domain:</label> 
  <input type="url" id="url" placeholder="Enter URL including HTTP://" />
</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;
}

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

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