input:not(:placeholder-shown) ~ label selector does not work with autofill

Question

I have floating placeholder in the input field.

Placeholder will appear in center when we input value has not been provided. as shown in the below screenshot (Email and

Answer 1

I had the same problem. In my form, I'm using the following selectors to move my label text out of the way, on any of these 3 conditions:

1. :focus (so it's not in the way of the cursor when focused)
2. :not(:placeholder-shown) (indicating "the input is not empty")
3. :-webkit-autofill (because 2 wasn't triggering on page refresh / autofill)

The SCSS combination is:

input {
  &:focus, &:not(:placeholder-shown), &:-webkit-autofill {
    &+label { /* Move your label */ }
  }
}

(Note that you also need a placeholder=" " on your input.)

Here's a live example: https://codepen.io/jeffward/pen/ZdBxXd