Effect Placeholder

by Marcel Ferdinand

HTML

<body>
  <section id='vplace'>
    <form action='#'>
      <label>
        <input placeholder='Name' type='text'>
        <span>Type your name (e.g Marcel)</span>
      </label>
    </form>
  </section>
</body>

CSS

* {
  font-family: "Verdana", sans-serif;
  color: #ff7c53;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}

body {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: -17px;
  overflow: auto;
}

section {
  float: left;
  position: relative;
  width: 100%;
  height: 22vw;
  background: #fff;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
section:nth-child(2n+1) {
  background: #eee;
}

#vplace {
  background: #30B56B;
}
#vplace form {
  display: table;
  position: relative;
  margin: 10px;
}
#vplace form label {
  position: relative;
  display: block;
}
#vplace form label input {
  font: 12px "Verdana", sans-serif;
  color: #641a46;
  box-sizing: border-box;
  display: block;
  border: none;
  padding: 12px;
  width: 200px;
  font-size: 12px;
  outline: none;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#vplace form label input::-webkit-input-placeholder, #vplace form label input::-webkit-input-placeholder {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  color: #999;
  font: 12px "Verdana", sans-serif;
}
#vplace form label input::placeholder, #vplace form label input::-webkit-input-placeholder {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  color: #999;
  font: 12px "Verdana", sans-serif;
}
#vplace form label input:focus, #vplace form label input.vClicked {
  padding-top: 18px;
  padding-bottom: 6px;
}
#vplace form label input:focus::-webkit-input-placeholder, #vplace form label input.vClicked::-webkit-input-placeholder {
  color: transparent !important;
}
#vplace form label input:focus::-moz-placeholder, #vplace form label input.vClicked::-moz-placeholder {
  color: transparent !important;
}
#vplace form label input:focus:-ms-input-placeholder, #vplace form label input.vClicked:-ms-input-placeholder {
  color: transparent !important;
}
#vplace form label...

JavaScript

$('#vplace input').on('change', function() {
  var input = $(this);  
  if (input.val().length) {
    input.addClass('vClicked');
  } else {
    input.removeClass('vClicked');
  }
});