How to move label in reactjs?

Question

**I want to move label little bit up when clicked on input field with JavaScript or CSS if possible **

This is HTML Part

<div className="inputbox">
        <div className="label">
           <img src={icon} alt="" width={width} height={height} />
           <label htmlFor={type}>{labelText}</label>
        </div>
        <input type={type} name={type} className="authInput" required />
     </div>

CSS I tried

.inputbox input:focus ~ .label,
.inputbox input:valid ~ .label{
   position: absolute;
   top: -18px;
   left: 0;
}

`input:focus ~ .label` looks for html structure that matches : ` ` see https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator . Your HTML requires javascript here :( --/-- CSS will not be able to do this here. — G-Cyrillus, Jun 12 '20 at 09:06
you can update the question (& title) to find how to do it in reactjs/javascript and remove the css tag ;) then the question is not a duplicate anymore and can be reopen, else delete it and ask another question about react only ;) — G-Cyrillus, Jun 12 '20 at 14:55

score 1 · Answer 1 · answered Jun 12 '20 at 09:11

Your problem is that your selector does not match your html structure. You are matching every label class which is preceded by an input field. The ~ selector works only from left to right, not the other way around, which would be better in your case.

You can now either switch around the input and div field or use Javascript to apply styles when the element is focused.

score -2 · Answer 2 · answered Jun 13 '20 at 09:20

-2

.inputbox input:focus + .label,
.inputbox input:valid + .label{
  position: absolute;
   top: -18px;
   left: 0;
}

I changed ~ sign to + sign and it is working now

answered Jun 13 '20 at 09:20

Shashank Dubey

113
2
10

There is no way this is working with the markup you provided in the question. – TylerH Jun 22 '20 at 17:12
This is working perfectly you better learn css again :( – Shashank Dubey Jul 08 '20 at 14:37
A more likely situation is that you need to learn what a [mcve] is. – TylerH Jul 08 '20 at 21:20

How to move label in reactjs?

2 Answers2