HTML CSS Float Label Pattern - Handling Optional Fields

Question

I am exploring Float Label pattern for web page using HTML and CSS. The code was referred from http://codepen.io/boast/pen/pLjld The problem is "required" property is must to have Float Label effect here. Wanted to understand how can we achieve the Float Label effect for Optional Input Fields? JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

The best solution is to use :placeholder-shown pseudo-class in conjunction with :focus and + adjacent selector: https://github.com/tonystar/float-label-css This method works in ANY browser (all non-supporting browsers will automatically fall back to the static layout w/o animation). See demo below:

Sign up

Name

Email

Password

Sign up

Run code snippetExpand snippet