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

It works for me

.form-label-group input:-webkit-autofill ~ label {
        /* CSS property  */
}

You can try it


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