CSS ändert mit Fokus-Attribut auf Eingabefeld

Question

Ich versuche, die Beschriftung zu beeinflussen, wenn der Eingang fokussiert ist. Aus welchem ​​Grund auch immer wird die CSS für das Label nicht erkannt, wenn die Eingabe fokussiert ist.

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

Sie es mit reinem CSS tun können, nur dann, wenn das Etikett auf das Eingabefeld unter Verwendung + oder ~ Wähler, dh

Zur visuellen Neuordnen des Eingangs

input:focus + label { 
 
    color: red; 
 
}

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

nächsten ist und Labelpositionen, siehe die einfache Demo mit 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>