How to apply styles to label while input:focus is true

Question

<div class="input-container">
    <label>Input Label</label>
    <input />
</div>

This is the html, I want to resize and reposition the label test when the input focus is active

my css looks something like this

.input-container > input:focus .input-container > label {
    color: green;

}

For this example, is there a way to change the label text color to green when the input is focussed? Thank you, I know this is easy with JS, I am looking for an all css solution though

A CSS rule can only affect sibling elements after the current element. So you would need the input to be before the label in the markup to be able to do this. — DBS, Sep 07 '22 at 15:18
yes, you can use the `focus-within` selector. i have created an example for you as an answer — Boguz, Sep 07 '22 at 15:28

score 4 · Answer 1 · answered Sep 07 '22 at 15:23

I think something like this would work:

.label {
  color: blue;
}

.input-container:focus-within .label {
  color: green;
}

<div class="input-container">
  <label class="label">Input Label</label>
  <input class="input" />
</div>

(this allows you to change the color of the label element whenever the focus is on any of the .input-container child elements)

score 0 · Answer 2 · answered Sep 07 '22 at 15:21

If you can change the order of the markup, you can use the sibling selector (+) Documentation

.input-container > input:focus + label {
  color: green;
}

<div class="input-container">
  <input />
  <label>Input Label</label>
</div>

You can use CSS to position the label/input differently (visually), as long as the markup remains the same.

score 0 · Accepted Answer · answered Sep 07 '22 at 15:25

As per the comments:

"A CSS rule can only affect sibling elements after the current element. So you would need the input to be before the label in the markup to be able to do this"

So you will have to put the input first. Then you can use flex with row-reverse on .input-container to re-adjust the order. Then just use the sibling selector ~ to style the label when input:focus.

.input-container {
  display: flex;
  flex-flow: row-reverse;
  justify-content: start;
}

input {
  margin-left: .5em;
}

.input-container > input:focus ~ label {
    color: green;
}

<div class="input-container">
  <input>
  <label>Input Label</label>
</div>

This worked! thank you, just had to switch the order of input and label — Erik Lew, Sep 07 '22 at 15:38

How to apply styles to label while input:focus is true

3 Answers3