Индекс блокировки флажка не работает, когда он установлен в скрытое с пользовательским дизайном

Я использую флажок и добавляю к нему пользовательский дизайн, используя CSS

label {
  position: relative;
  margin-bottom: 0.5em; }

.input-field {
  width: 100%;
  border: 1px solid #ecf0f1;
  padding: 0.5em;
 }

input[type="radio"],
input[type="checkbox"] {
  display: none; 
}

input[type="checkbox"] + label {
  padding-left: 1.5em; 
}

input[type="checkbox"] + label:before {
  position: absolute;
  left: 0;
  top: 4px;
  content: "";
  width: 1em;
  height: 1em;
  border: 1px solid rgba(0, 0, 0, 0.25); 
}

input[type="checkbox"]:focus,
input[type="checkbox"]:checked + label:before {
  content: "\2713"; /* "✓" */ 
}

Но проблема в том, что при навигации по форме с клавиатурой с помощью клавиши табуляции флажок игнорируется. Как включить его в поток навигации?

Демо