Изменения CSS с атрибутом фокуса на поле ввода

Question

Я пытаюсь воздействовать на метку всякий раз, когда ввод фокусируется. По какой-либо причине css не распознается для метки всякий раз, когда ввод фокусируется.

li.sm-vol label { 
    position: absolute; 
    top: 33px; 
    width: 100%; 
    background: #462770; 
    color: #fff; 
    font-weight: 400 !important; 
    padding-left: 10px; 
    transition: all 0.2s ease; 
} 

li.sm-vol input:focus li.sm-vol label { 
    top: 15px; 
} 

Answer 1

Вы можете сделать это с чистым CSS только если метка находится рядом с полем ввода с помощью + или ~ селектор, т.е.

input:focus + label { 
 
    color: red; 
 
}

<input type="text"> 
 
<label>Label</label>

Для визуального изменения порядка ввода и позиции ярлыков, см. простую демонстрацию с помощью flexbox.

.fieldset { 
 
    display: inline-flex; 
 
} 
 
.fieldset label { 
 
    order: -1; 
 
    margin-right: 4px; 
 
} 
 
.fieldset input:focus + label { 
 
    color: red; 
 
}

<div class="fieldset"> 
 
    <input type="text"> 
 
    <label>Label</label> 
 
</div>