Applying :focus pseudo-class on an element

Question

Here, I want to edit some attributes of my label when there is a focus event on input field so,

But it is not working, when the input field gains focus there is no change in label element what should i do both of the below methods are not working for me.

I am writing it as,

  .input-field:focus + .input-label{
     background : black;
   }
   or
  .input-field:focus .input-label{
     background : black;
   }

Both the methods are not working for me.

Do u want the background black for input box on focus? or plz send me the html code — Manikandan2811, Sep 04 '19 at 11:48
Your first code would only work if your label is a sibling of your input and comes *after* the input field. The other one would only work if the label is a child of your input field which is not possible — Tim Gerhard, Sep 04 '19 at 11:51
Show your html code because there are a lot of way according to html code — Nurbek Boymurodov, Sep 04 '19 at 11:53
Using my magic glass, I guess you want to change your element style when ANOTHER element gains focus? If yes, you may need some Javascript here — Daniel, Sep 04 '19 at 12:01
thanks you guys especially Tim Gerhard for your suggestion it worked thanks — pratik, Sep 04 '19 at 12:06

score 0 · Answer 1 · answered Sep 04 '19 at 12:39

Use :focus-within pseudo selector to achieve the desired functionality. This selector works if element receives focus or contains another element which receives focus.

.container:focus-within label{
  background-color: red;
}

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

You can read more about this selector here. Note, that this method is not supported in IE, but who cares...

Applying :focus pseudo-class on an element

1 Answers1