0

I have run in to this irritating problem that I can't seem to get around: the HTML code looks like this 

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

I seek to apply a filter to the lable's img when there is focus on the input. I have tried both with:

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

But nothing seems to have an effect. Is it my localhost doing tricks or do I have to try something totally different? and if then what? Looking forward to hear from you wizards.

Johannes
  • 64,305
  • 18
  • 73
  • 130
Holycrabbe
  • 63
  • 1
  • 1
  • 11

1 Answers1

1

The selectors + and ~ both working for the next element(s), So you must to bring the input before the label. If you want your label is in the left of the input put them in a right to left div or set float left for label:

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

Or 

<form>      
  <input type="text" name="name" required/>
  <lable style="float:left;"><img src="/image.png"/></lable>
</form>
Farzin Kanzi
  • 3,380
  • 2
  • 21
  • 23