LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
.col-3{
  float: left;
  width: 27.33%;
  margin: 40px 3%;
  position: relative; /* necessary to give position: relative to parent. */
}
input[type="text"]{
  font: 15px/24px "Lato", Arial, sans-serif;
  color: #333;
  width: 100%;
  box-sizing: border-box;
  letter-spacing: 1px;
}

.effect-1{
  border: 0;
  padding: 4px 0;
  border-bottom: 1px solid #ccc;
  background-color: transparent;
}

.effect-1 ~ .focus-border{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #3399FF;
  transition: 0.4s;
}

.effect-1:focus ~ .focus-border,
.has-content.effect-1 ~ .focus-border{
  width: 100%;
  transition: 0.4s;
}

.effect-1 ~ label{
  position: absolute;
  left: 0;
  width: 100%;
  top: 9px;
  color: #aaa;
  transition: 0.3s;
  z-index: -1;
  letter-spacing: 0.5px;
}

.effect-1:focus ~ label,
.has-content.effect-1 ~ label{
  top: -16px;
  font-size: 12px;
  color: #3399FF;
  transition: 0.3s;
}
JS
$(window).load(function(){
  $(".col-3 input").val("");
  $(".input-effect input").focusout(function(){
    if($(this).val() != ""){
      $(this).addClass("has-content");
    }else{
    $(this).removeClass("has-content");
    }
  });
});
Term
Sat, 04/14/2018 - 20:43

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv