How to create material design input form using css and bootstrap? - html

Question

I want to design following material design input form using css and bootstrap. Following code is I am currently using. But it doesn't provide exact result I want.
Code Pen Link : View Source Code Here
HTML CODE :
<div class="container">
<h2>Google Material Design in CSS3<small>Inputs</small></h2>
<form>
<div class="group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>
<div class="group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Email</label>
</div>
</form>
<p class="footer">
a tutorial by scotch.io
</p>
</div>
But I want this design :

Answer 1

CSS Only solution; use combination of sibling selector ~ on the label and :valid pseudo selector on the input.
body {
margin: 10px;
}
.form-group>label {
bottom: 34px;
left: 15px;
position: relative;
background-color: white;
padding: 0px 5px 0px 5px;
font-size: 1.1em;
transition: 0.2s;
pointer-events: none;
}
.form-control:focus~label {
bottom: 55px;
}
.form-control:valid~label {
bottom: 55px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-6">
<br>
<div class="form-group">
<input type="text" class="form-control" id="usr" required>
<label for="usr">Name</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="password" required>
<label for="usr">Password</label>
</div>
</div>
</div>
</div>

Answer 2

Since you've tagged Bootstrap 4, I'm assuming you wanted the solution with regards to that framework.
Setup a default form-group, label, and input markup like this;
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
Then add this css, what this would do is
position label relative to its container (form-group)
then we specified the top and left positions so that it would land
on top of the input field
I added a white background and padding to the label so that it would have a box around the label.
.form-group > label {
top: 18px;
left: 6px;
position: relative;
background-color: white;
padding: 0px 5px 0px 5px;
font-size: 0.9em;
}
Here's a fiddle with that code on bootstrap 4;
http://jsfiddle.net/rw29jot4/
For the animation, check this fiddle, we need to utilize click events and move the position of the label;
Updated code with animation;
http://jsfiddle.net/sedvo037/
EDIT: Please see my answer below which uses only CSS.

Answer 3

Try with this code.
HTML:
<div class="main_div">
<div class="group">
<input type="text" required="required"/>
<label>Name</label>
</div>
</div>
CSS:
.main_div{
padding: 30px;
}
input,
textarea {
background: none;
color: #c6c6c6;
font-size: 18px;
padding: 10px 10px 10px 15px;
display: block;
width: 320px;
border: none;
border-radius: 10px;
border: 1px solid #c6c6c6;
}
input:hover{
border: 3px solid black;
}
input:focus,
textarea:focus {
outline: none;
border: 3px solid black;
}
input:focus ~ label, input:valid ~ label,
textarea:focus ~ label,
textarea:valid ~ label {
top: -5px;
font-size: 12px;
color: #000;
left: 11px;
}
input:focus ~ .bar:before,
textarea:focus ~ .bar:before {
width: 320px;
}
input[type="password"] {
letter-spacing: 0.3em;
}
.group{
position: relative;
}
label {
color: #c6c6c6;
font-size: 16px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 15px;
top: 12px;
transition: 300ms ease all;
background-color: #fff;
padding: 0 2px;
}