LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Pure CSS - Input Material Design

Como quer ser chamado?
Password
Email
CSS
*,
*:before,
*:after {
  box-sizing: border-box;
  outline: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*Title Default*/
body {
  background: #fff;
  color: #777;
  text-align: center;
  font-family: arial;
  font-size: 13px;
}
h1 {
  margin: 1em 0;
  border-bottom: 1px dashed;
  padding-bottom: 1em;
  font-weight: lighter;
}
.form {
  text-align: left;
  padding-top: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.form input {
  padding: 8px 0;
  order: 2;
  border: 0;
  width: 100%;
  border-radius: 0;
  caret-color: #259df5;
  background-size: 0 2px, 100% 1px;
  background-repeat: no-repeat;
  background-position: center bottom, center 100%;
  background-color: transparent;
  box-shadow: none;
  transition: 0.3s ease;
  background-image: linear-gradient(#259df5, #259df5), linear-gradient(#bdbdbd, #bdbdbd);
  letter-spacing: -1px;
}
.form input + label {
  position: absolute;
  justify-content: center;
  transition: 0.3s ease;
  order: 1;
  justify-content: center;
  font-size: 14px;
  top: 25px;
  pointer-events: none;
}
.form input + label + em {
  order: 3;
  margin-top: 1px;
}
.form input:not(.input_search):focus {
  background-image: linear-gradient(#259df5, #259df5), linear-gradient(#bdbdbd, #bdbdbd) !important;
  background-size: 100% 1px, 100% 1px;
}
.form input:not(.input_search):focus + label,
.form input:not(.input_search):focus + label + em {
  color: #259df5;
  font-size: 13px;
  top: 6px !important;
}
.form input:not(.input_search):valid:focus + label,
.form input:not(.input_search):valid:focus + label + em {
  color: #0c9f65;
  font-size: 13px;
  top: 6px !important;
}
input:not([value=""]):not(.input_search) + label {
  font-size: 13px;
  top: 6px !important;
}
input:not([value=""]):not(.input_search):invalid,
input:not([value=""]):not(.input_search):focus:invalid {
  background-image: linear-gradient(#ff434e, #ff434e), linear-gradient(#bdbdbd, #bdbdbd) !important;
  background-size: 100% 1px, 100% 1px;
}
input:not([value=""]):not(.input_search):invalid + label,
input:not([value=""]):not(.input_search):invalid + label + em {
  color: #ff434e;
}
input:not([value=""]):not(.input_search):focus:valid {
  background-image: linear-gradient(#1ede8f, #1ede8f), linear-gradient(#bdbdbd, #bdbdbd) !important;
  background-size: 100% 1px, 100% 1px;
}
input:not([value=""]):not(.input_search):disabled + label,
input:not([value=""]):not(.input_search):disabled + label + em {
  opacity: 0.6;
}
Term
Sat, 04/14/2018 - 20:43

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv