CSS beeinflussen Geschwister img

Question

ich auf diese irritierende Problem ausgeführt haben in die ich nicht zu umgehen scheinen: der HTML-Code sieht wie folgt aus

<form> 
<lable><img src="/image.png"/></lable> 
<input type="text" name="name" required/> 
</form> 

Ich suche img zum Label des einen Filter anwenden, wenn es konzentriert sich auf die input. Ich habe beides versucht mit:

input:focus ~ lable>img{filter...} 
input:focus + lable>img{filter...} 
input:focus lable>img{filter...} 
input:focus img{filter...} 

Aber nichts scheint eine Wirkung zu haben. Ist es mein Localhost, der Tricks macht oder muss ich etwas völlig anderes ausprobieren? und wenn dann was? Ich freue mich darauf, von Ihnen Zauberer zu hören.

Answer 1

Die Wähler + und ~ sowohl für das nächste Element arbeitet (e), so müssen Sie die input vor dem label zu bringen. Wenn Sie Ihr Etikett in der linken Seite des Eingangs ist steckte sie in einem von rechts nach links oder div gesetzt Schwimmer links für Label:

<form> 
    <div style="direction: rtl;">   
    <input type="text" name="name" required/> 
    <lable><img src="/image.png"/></lable> 
</div> 
</form> 

Oder

<form>  
    <input type="text" name="name" required/> 
    <lable style="float:left;"><img src="/image.png"/></lable> 
</form>