Как повесить focus на элемент внутри label?

#css #css3 #html5

Добрый день уважаемые. Подскажите, пожалуйста как повесить фокусировку на label а
точнее на элемент который находиться всередине него. Приведу пример 



.bl_payment__label {
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
}
.bl_payment__label:focus {
  color: #ffd608;
}

input {
  position: absolute;
  visibility: hidden;
}

.bl_payment__text {
  color: inherit;
  font-size: 16px;
}

.bl_payment__text {
  margin-left: 25px;
  color: #505050;
  font-size: 18px;
  position: relative;
  display: block;
  width: 100%;
}
.bl_payment__text:hover {
  color: #ffd608;
}
.bl_payment__text:focus {
  outline: none;
  color: #ffd608;
  text-decoration: underline;
}

.bl_payment__text:before {
  content: "";
  position: absolute;
  left: -25px;
  top: 8px;
  width: 11px;
  height: 11px;
  box-sizing: border-box;
  border: 1px solid #505050;
}

.bl_delivery__label input:checked + .bl_delivery__text,
.bl_payment__label input:checked + .bl_payment__text {
  font-weight: bold;
  color: #ffd608;
}
.bl_delivery__label input:checked + .bl_delivery__text:after,
.bl_payment__label input:checked + .bl_payment__text:after {
  content: "";
  position: absolute;
  left: -22px;
  top: 10px;
  width: 5px;
  height: 5px;
  background-color: #ffc808;
  box-sizing: border-box;
  z-index: 2;
}

  
  Оплата наличными


  
  Банковский перевод




как сделать так что б по этим radio кнопкам можно было передвигаться через Tab ?
Допустим я хочу что б текст подсвечивался, и добавлялся правильный стиль по checked
 при этом их можно б было активировать через Enter) ?
    

Ответы

Ответ 1

Здравствуйте,но Вы же уже сделали возможность передвигаться добавив атрибут tabindex="0".Я
думаю для текста задан .

bl_payment__text:focus {
  outline: none;
  color: #ffd608;
  text-decoration: underline;
}


Но у вас данный элемент фокус не получает,это можно посмотреть добавив tabindex="0":



  
  Оплата наличными


  
  Банковский перевод
  


Исправьте селектор:

.bl_payment__text:focus {
  outline: none;
  color: #ffd608;
  text-decoration: underline;
}


на 

.bl_payment__label:focus {
    outline: none;
}
.bl_payment__label:focus .bl_payment__text {
  color: #ffd608;
  text-decoration: underline;
}


А для enter воспользуйтесь js,событие keydown.


Ответ 2

Всё оказалось ужасно банально. Оказывается работает на radio-кнопках своеобразно.
"Чекается" он не Enter'ом, а пробелом. Перемещение внутри одной группы не Tab'ом, а
стрелками.



.bl_payment__label {
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
}
.bl_payment__label:focus {
  color: #ffd608;
}

input {
  position: absolute;
  opacity: 0;
}

.bl_payment__text {
  color: inherit;
  font-size: 16px;
}

.bl_payment__text {
  margin-left: 25px;
  color: #505050;
  font-size: 18px;
  position: relative;
  display: block;
  width: 100%;
}
.bl_payment__text:hover {
  color: #ffd608;
}
.bl_payment__text:focus {
  outline: none;
  color: #ffd608;
  text-decoration: underline;
}

.bl_payment__text:before {
  content: "";
  position: absolute;
  left: -25px;
  top: 8px;
  width: 11px;
  height: 11px;
  box-sizing: border-box;
  border: 1px solid #505050;
}

.bl_delivery__label input:checked + .bl_delivery__text,
.bl_payment__label input:checked + .bl_payment__text {
  font-weight: bold;
  color: #ffd608;
}
.bl_delivery__label input:checked + .bl_delivery__text:after,
.bl_payment__label input:checked + .bl_payment__text:after {
  content: "";
  position: absolute;
  left: -22px;
  top: 10px;
  width: 5px;
  height: 5px;
  background-color: #ffc808;
  box-sizing: border-box;
  z-index: 2;
}

  
  Оплата наличными


  
  Банковский перевод





Не понятно, зачем такое было реализовано, но за то теперь точно можно работать с
элементами label без мыши если допустить что на них повешен tabindex="0"