codeSTACKrDate of publication
Title : Transparent Login Form - HTML \u0026 CSS ONLY
Lasting : 19.38
Date of publication :
Views : 14.817
Downloaded once : 0
Hi, thank for all the helpful content you produce. As I finished recreating the code, while playing with the both forms, I found one problem on each, and I can't wrap my head around a solution for these. I wanted to know if you had a tip or if you came across these as well in you experience as a developer.
So here it is :
1) on login form, the chrome autocomplete messes up with the transparent background, making it white after selecting an option from the autocomplete menu. So to recap, once you've selected a previously submitted text which later is suggested by autocomplete, and the background of the input text remains white thereof.
2) on password lost form, the input is of type email and is required. So if I type something which is invalid and focus out of the input, then the label comes back on top of the invalid input text. So I'm trying to define in the CSS a state that keep the label smaller orange on top when input is invalid and unfocused, but I can't seem to find the correct code.
Thanks again for your time !
Inspiring and really useful content! One issue though, the label transformations <strike>don't</strike> appear to be working on Chrome (Version 83.0.4103.97 (Official Build) (64-bit)). Can you confirm and is there a workaround? Updated: On second thoughts I think this maybe to do with a Norton Addon I have installed.
Thanks for the great video! I did have a question about the 'forgot password' form I noticed if you do not enter a valid email address the 'email' text will lay over the user input I know we fixed this with the username and password field with ".form .input-group input:valid + label" however if I try to adjust '.form .input-group input:invalid + label' both forms change. Would be curious in what you would do in this case?
Wow, this video is great. I'm trying to work more on web dev but find my front end skills are lacking. I can imagine great design in my head, but somewhat struggle to implement it. What resources would you suggest to become better at front end.
a new subscriber ;)