0

**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;
}

Form Image

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Shashank Dubey
  • 353
  • 1
  • 6
  • 17
  • `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
  • Thank you , i got the point – Shashank Dubey Jun 12 '20 at 14:50
  • 2
    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

2 Answers2

1

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.

Gh05d
  • 7,923
  • 7
  • 33
  • 64
-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

Result

Shashank Dubey
  • 353
  • 1
  • 6
  • 17