Добрый день уважаемые. Подскажите, пожалуйста как повесить фокусировку на 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) ?
Ответ
Всё оказалось ужасно банально. Оказывается работает на 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"
Комментариев нет:
Отправить комментарий