For my survey form I like to have non specific content written in the the < input text/email/number > cause a certain action of < label > both together in the same < div > .
I mostly want to know this because of the floating action but it would be good to know in general.
For now I am using the :focus and :valid, but it causes some problem for the email input if it has no correct address as well as for the number input. I can find my way around it by using a text input instead of the email and put no limitations (min="" max="") to the number input, but I do rather not if not necessary…
Similarly I would like any input in the < text area > to cause some effect to its background. I managed to do this with :focus but I’d like to have it remain in a different state once there is text in there and :focus is out.
Let me know if the question is not clear.
This is the CodePen: https://codepen.io/21karat/pen/LYLRQGz?editors=1100