<div class="input-row">
  <label>
    Name

    <input class="input text-input" autofocus/>
  </label>
</div>

<div class="input-row">
  <label>
    Favourite icecream flavor

    <select class="select">
      <option>Chocolate</option>
      <option>Tuna</option>
      <option>Liquid nitrogen</option>
    </select>
  </label>
</div>

<div class="input-row">
  <label>
    More about you

    <textarea class="textarea text-input" rows="4"></textarea>
  </label>
</div>

<div class="input-row">
  <label>
    <input type="checkbox" />
    
    I like puppies
  </label>
</div>

<div class="input-row">
  <button class="button">Submit</button>
</div>

<div class="input-row">
  <a href="#0">Privacy policy</a>
</div>

body {
  font-family: sans-serif;
  font-size: 18px;
}

.input-row {
  margin: 30px auto;
  width: 100%;
  max-width: 400px;
}

.input,
.select,
.textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  font-size: 18px;
  border: 1px solid lightgrey;
  margin-top: 5px;
  font-family: inherit;
}

input[type=checkbox] {
  transform: scale(1.3)
}

.button {
  padding: 10px;
  width: 100%;
  border: none;
  font-size: 18px;
  background: crimson;
  color: white;
}

.button:hover {
  background: #ce1034;
}

.button:active {
  background: #a70f2c;
}

/* a subtle focus style for keyboard-input elements */
.text-input:focus {
  outline: 1px solid #aaa;
}

/* no focus style for non-keyboard-inputs elements */
button:focus,
select:focus {
  outline: none;
}

/* and for keyboard users, override everything with
   a Big Blue Border when focused on any element */
body.user-is-tabbing *:focus {
  outline: 2px solid #7AACFE !important; /* for non-webkit browsers */
  outline: 5px auto -webkit-focus-ring-color !important;
}

function handleFirstTab(e) {
  if (e.keyCode === 9) {
    document.body.classList.add('user-is-tabbing');
    window.removeEventListener('keydown', handleFirstTab);
  }
}

window.addEventListener('keydown', handleFirstTab);