Simply Material Design Effect Input

In this example below you will see how to do a Simply Material Design Effect Input with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by jodacame, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jodacame ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Simply Material Design Effect Input</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <form>
  <h1>My Form</h1>
<div class="input-md">
  
  <input type="email" required>
  <label>Your Email</label>
</div>
  
  <div class="input-md">
  
  <input type="password" required>
  <label>Your Password</label>
</div>
  
</form>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/jodacame/simply-material-design-effect-input-WZzBKO */
.input-md{
  position:relative;
}
.input-md input
{
  display:block;
  width:100%;
  border:0px;
  border-bottom:1px solid rgba(0,0,0,.2);
  padding-bottom:10px;
  padding-top:10px;
  margin-top:25px;
  font-size:16px;
  background-color:transparent;
}
.input-md input:focus,
.input-md input:active{
  outline:0;
  box-shadow:none;
  border-bottom:2px solid #303F9F;
}
.input-md input:focus +label,
.input-md input:valid +label{
  transform:translate3d(0,-25px,0);
  transition:all .1s ease-in;
  font-size:12px;
}
.input-md label
{
  transition:all .1s ease-in;
  display:block;
  width:100%;
  position:absolute;
  color:rgba(0,0,0,.2);
  bottom:10px;
  font-size:14px;
  
  pointer-events: none;
}

/* Custom CSS */
body{
  background-color:#EEE;
  font-size:18px;
  font-family:'Arial';
}
form{
  background-color:#FFF;
  margin:auto;
  width:300px;
  padding:20px;
  border-radius:2px;
  border-bottom:1px solid rgba(0,0,0,.1);
}
form h1{
  font-size:22px;
  color:rgba(0,0,0,.7);
  
}

Comments