CSS Programmer Reaches Out With a Question About Site Labels

A CSS programmer recently reached out to their fellow programmers for some help with a problem. Their problem is associated with creating a form and using labels instead of placeholders for the field. When input is received, the field fills in and moves up and out of the way. The problem is that the attributes do not take into account when the user hovers over the auto-fill form. It does not put the text into the field, and the field just stays where it is. The programmer wants some help to correct that. The programmer has only found this issue in Chrome.

One person replied with a similar experience when using auto-fill fields in Chrome. They noted that their Chrome setup did not trigger an event, so the field did not move up and out of the way. They did find a way to work around it, but they had to use JavaScript in order to do it. A link offering a tutorial to use JavaScript was shared to the original poster.

Another person replied with a line of code for the original poster to try. They noted that no JavaScript should be necessary unless the original poster is coding in IE version 11. The person said that they would create a tutorial to show how that works.

One additional person noted that this can be solved in CSS, with no JavaScript required. The person gave two detailed explanations and lines of code on how the original poster could attend to their issue. Another person replied with a link to a website that offers tricks and tips for coding in CSS.

Several other people had ideas on how to fix the problem without resorting to JavaScript. One person wondered if the original poster had tried detecting values in the fields. Finally, a respondent noted that those types of floating labels can be a problem for people who use a screen reader. They can also be an issue in the mobile environment and for anyone else who has accessibility issues. The original poster could use any of the offered CSS solutions. For more information click here https://www.reddit.com/r/web_design/comments/by89k2/css_floating_labels_chrome_autofill/.