Как использовать вкладку клавиатуры на скрытых переключателях - PullRequest
Новая
       9

Как использовать вкладку клавиатуры на скрытых переключателях

0 голосов
/ 06 июля 2018

В форме у меня есть следующий общий HTML: 

<input type="text" autofocus placeholder="Full name" />

<input name="yesno" type="radio" value="Yes" id="yes">
<label for="yes">Yes</label>

<input name="yesno" type="radio" value="No" id="no">
<label for="no">No</label>

В этой форме я могу TAB из текста input в переключатели и выбрать «Да» или «Нет», используя левый /правые клавиши.

Затем я применяю некоторые стили, чтобы переключатели соответствовали дизайну: 

input[type="text"] {
  height: 60px;
  text-indent: 1em;
}

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

input[type="radio"]+label {
  color: #106AA2;
  background: #fff;
  font-weight: 100;
  text-align: center;
  padding: 1em 2em;
  height: auto;
  font-size: 1.3em;
  border: 1px solid #C5DBE8;
  display: inline-block;
  letter-spacing: inherit;
  vertical-align: middle;
  cursor: pointer;
}

input[type="radio"]:checked+label {
  background: linear-gradient(#1275B2, #106AA2);
  color: #fff;
}
<input type="text" autofocus placeholder="Full name" />

<input name="yesno" type="radio" value="Yes" id="yes">
<label for="yes">Yes</label>

<input name="yesno" type="radio" value="No" id="no">
<label for="no">No</label>

Однако теперь я больше не могу TAB от текста input до переключателей.Я знаю, что это потому, что у меня есть display:none d.

Есть ли кросс-браузерный способ, позволяющий пользователю TAB на этих переключателях?

В идеале я ищу решение, которое является чистым CSS, но я открыт для решения javascript.

Ответы [ 3 ]

0 голосов
/ 06 июля 2018

Не скрывайте переключатели, закройте их метками, вместо этого используйте относительное положение с отрицательным левым значением

И добавьте пользовательский CSS для стилей фокуса на этикетке. Обновлен CSS 

input[type="radio"]:focus+label {
  outline: 2px dotted red;
}

input[type="radio"]+label {
  color: #106AA2;
  background: #fff;
  font-weight: 100;
  text-align: center;
  padding: 1em 2em;
  height: auto;
  font-size: 1.3em;
  border: 1px solid #C5DBE8;
  display: inline-block;
  letter-spacing: inherit;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
  left: -20px;
}


input[type="text"] {
  height: 60px;
  text-indent: 1em;
}

input[type="radio"]:focus+label {
  outline: 2px dotted red;
}

input[type="radio"]+label {
  color: #106AA2;
  background: #fff;
  font-weight: 100;
  text-align: center;
  padding: 1em 2em;
  height: auto;
  font-size: 1.3em;
  border: 1px solid #C5DBE8;
  display: inline-block;
  letter-spacing: inherit;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
  left: -20px;
}

input[type="radio"]:checked+label {
  background: linear-gradient(#1275B2, #106AA2);
  color: #fff;
}
<input type="text" autofocus placeholder="Full name" />


<input name="yesno" type="radio" value="Yes" id="yes">
<label for="yes">Yes</label>



<input name="yesno" type="radio" value="No" id="no">
<label for="no">No</label>
0 голосов
/ 06 июля 2018

Радиокнопки не являются вкладками как таковыми.Вы должны использовать стрелки на клавиатуре, чтобы изменить радио.Это ожидаемое поведение, когда дело доходит до доступности.Однако я бы посоветовал дать визуальное представление о том, какое радио выбрано (как вы уже сделали с метками).

Это все, что требуется. 

input[type="radio"] {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

Это окончательный ответ ниже 

input[type="text"] {
  height: 60px;
  text-indent: 1em;
}

input[type="radio"] {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

input[type="radio"]+label {
  color: #106AA2;
  background: #fff;
  font-weight: 100;
  text-align: center;
  padding: 1em 2em;
  height: auto;
  font-size: 1.3em;
  border: 1px solid #C5DBE8;
  display: inline-block;
  letter-spacing: inherit;
  vertical-align: middle;
  cursor: pointer;
}

input[type="radio"]:checked+label {
  background: linear-gradient(#1275B2, #106AA2);
  color: #fff;
}
<input type="text" autofocus placeholder="Full name" />

<input name="yesno" type="radio" value="Yes" id="yes">
<label for="yes">Yes</label>

<input name="yesno" type="radio" value="No" id="no">
<label for="no">No</label>
0 голосов
/ 06 июля 2018

Не делайте его несуществующим с display: none;, просто уменьшите его.

Вы можете просто установить width и height на 0, чтобы сделать ввод невидимым, но функциональным с вкладками. 

input[type="text"] {
  height: 60px;
  text-indent: 1em;
}

input[type="radio"] {
  /* display: none; */
  width: 0;
  height: 0;
}

input[type="radio"]+label {
  color: #106AA2;
  background: #fff;
  font-weight: 100;
  text-align: center;
  padding: 1em 2em;
  height: auto;
  font-size: 1.3em;
  border: 1px solid #C5DBE8;
  display: inline-block;
  letter-spacing: inherit;
  vertical-align: middle;
  cursor: pointer;
}

input[type="radio"]:checked+label {
  background: linear-gradient(#1275B2, #106AA2);
  color: #fff;
}
<input type="text" autofocus placeholder="Full name" />

<input name="yesno" type="radio" value="Yes" id="yes">
<label for="yes">Yes</label>

<input name="yesno" type="radio" value="No" id="no">
<label for="no">No</label>
...