Label doesn't transform on input focus-CodePudding

I want to transform a label of an input when someone clicks on the input. But it doesn't transform.

If I do .user-input:focus, .user-input:valid it changes the input which means it should work with the label.

.user-input:focus .user-label,
.user-input:valid .user-label {
  color: yellow;
  transform: translate(10px, -14px) scale(.8);
}

<div >
  <div >
    <label for="user" >Username</label>
    <input type="text" name="user"  required>
  </div>
</div>

CodePudding user response：

in css we can only select next sibling, we cannot select sibling that comes before selector sibling in DOM.
so, I have just placed label after input.
Use below css to keep label before input in view.

.input-group {
  display: flex;
  flex-direction: row-reverse;
  justify-content: start;
}

.input-group {
  display: flex;
  flex-direction: row-reverse;
  justify-content: start;
}

.user-label {
  transition: 0.5s;
}

.user-input:active .user-label,
.user-input:focus .user-label,
.user-input:valid .user-label {
  color: yellow;
  transform: translate(10px, -14px) scale(.8);
}

<div >
  <div >
    <input type="text" name="user"  required>
    <label for="user" >Username</label>
  </div>
</div>

CodePudding user response：

You can achieve that just by changing up a bit your HTML structure, switch your input with your label tag, you cannot select with css elements in the same div that are prior the targetted element

HTML

 <div >
      <div >
        <input type="text" name="user"  required>
        <label for="user" >Username</label>
      </div>
 </div>

CSS

.user-input:focus   .user-label {
  color: yellow;
  transform: translate(10px, -14px) scale(.8);
}