| Black_Star |
20.12.2017 21:37 |
Как повесить focus на элемент внутри label?
Добрый день уважаемые. Подскажите, пожалуйста как повесить фокусировку на label, а точнее на элемент который находиться в середине него. Приведу пример
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.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;
}
</style>
</head>
<body>
<label class="bl_payment__label" tabindex="0">
<input class="" type="radio" name="payment">
<span class="bl_payment__text">Оплата наличными</span>
</label>
<label class="bl_payment__label" tabindex="0">
<input class="" type="radio" name="payment">
<span class="bl_payment__text">Банковский перевод</span>
</label>
</body>
</html>
как сделать так что б по этим radio кнопкам можно было передвигаться через Tab ? (Допустим я хочу что б текст подсвечивался другим цветом и можно б было их активировать через Enter) ? |