Auswählen eines Etiketts vor einem Eingang in verschiedenen Zuständen

Question

Eingänge haben Zustände wie :focus und :valid, und ich möchte die Bezeichnung für diesen Eingang zeichnen, um das zu reflektieren. Das Problem ist, dass meine Eingabeformular wie folgt aussehen muss:

Field title 
[input] 

Field title 
[input] 
... 

und es scheint keine Möglichkeit zu geben, das Feld Titel auf Eingangszustände basierend auszuwählen. Die Selektoren + und ~ funktionieren nur auf Elementen, die auf das Ziel folgen. Ich kann die Reihenfolge der Elemente in einem direction: rtl Block nicht umkehren, da ich die Felder unter dem Titel brauche.

Alles, was übrig ist, scheint Hardcore-Optionen wie position: absolute zu sein und sie manuell zu platzieren. Ich sage Hardcore, da der Feldtitel eine variable Höhe hat und das ist viel manuelles Offset-Tippen. Gibt es bessere Alternativen?

Answer 1

können Sie flexbox verwenden und die Reihenfolge der Elemente ändern, um die Flex order mit:

.container { 
 
    display: flex; 
 
    flex-direction: column; /** vertical layout **/ 
 
} 
 

 
.textInput { 
 
    order: 1; 
 
} 
 

 
.field { 
 
    order: 0; 
 
} 
 

 
.textInput:focus + .field { 
 
    color: red; 
 
}

<div class="container"> 
 
    <input type="text" class="textInput"> 
 
    <label class="field">Field</label> 
 
</div>