How to do floating of labels in CSS

Question

I want to display the label of an input inside its input, so that when I click the input, the label will animate and go above the input and change the styles of the input's border. Like so: * { margin: 0; padding: 0; } form { width: 100%; max-width: 500px; margin: 0 auto; outline: 1px solid lightgrey; padding: 10px; } label, input[type='text'], input[type='password'] { font-size: 12pt; padding: 8px; } label { color: grey; } input { border: none; outline: none; border-bottom: 1px solid grey; } Username
Password
Run code snippetExpand snippet How can I achieve this with CSS? 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

This looks a lot like the Google new material design inputs. I created custom inputs for you that look like what you are looking for. .input-group { position: relative; margin: 40px 0 20px; } input { font-size: 18px; padding: 10px 10px 10px 5px; display: block; width: 300px; border: none; border-bottom: 1px solid #757575; } input:focus { outline: none; } label { color: #999; font-size: 18px; font-weight: normal; position: absolute; pointer-events: none; left: 5px; top: 10px; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all; } input:focus ~ label, input:valid ~ label { top: -20px; font-size: 14px; color: #4285f4; } .bar { position: relative; display:block; width:315px; } .bar:before, .bar:after { content: ''; height: 2px; width: 0; bottom: 1px; position: absolute; background: #4285f4; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all; } .bar:before { left: 50%; } .bar:after { right: 50%; } input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; } .highlight { position: absolute; height: 60%; width: 100px; top: 25%; left: 0; pointer-events: none; opacity: 0.5; } input:focus ~ .highlight { -webkit-animation: inputHighlighter 0.3s ease; -moz-animation: inputHighlighter 0.3s ease; animation: inputHighlighter 0.3s ease; } /* animations */ @-webkit-keyframes inputHighlighter { from { background: #4285f4; } to { width: 0; background: transparent; } } @-moz-keyframes inputHighlighter { from { background: #4285f4; } to { width: 0; background: transparent; } } @keyframes inputHighlighter { from { background: #4285f4; } to { width: 0; background: transparent; } }

Username

Password

Run code snippetExpand snippet