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:
:focus
(so it's not in the way of the cursor when focused):not(:placeholder-shown)
(indicating "the input is not empty"):-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