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

Я использую флажок и добавляю к нему пользовательский дизайн, используя 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"; /* "✓" */ 
}

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

Демо

Ответы

Ответ 1

Я изменил его с дисплея: none; непрозрачность: 0; и он отлично работает, вот новый отредактированный код

http://jsbin.com/yuxizazo/1

Ответ 2

Это потому, что у вас есть "display: none"; установите флажок.

Если вы удалите его, он отлично работает: http://jsbin.com/vogoripi/2

Если вы хотите использовать еще один метод для создания флажков, сохраняя эту функциональность, вы должны, возможно, посмотреть на такой плагин: http://uniformjs.com/

Я бы предложил оставить их как есть и просто оставить стандартный флажок, так как вы можете столкнуться с проблемами дальше по строке.

Ответ 3

приземлился здесь после поиска Google. Комментарий Tintin81 был полезен для меня.