Generated by SassMeister.com.

SassMeister-input-HTML.html

<form>
  <div class="field">
    <input type="text" pattern=".+" required="" placeholder="First Name"><label>First Name</label>
  </div>  <div class="field">
    <input type="text" pattern=".+" required="" placeholder="Last Name"><label>Last Name</label>
  </div>
</form>

SassMeister-input.sass

// ----
// Sass (v3.3.0.rc.3)
// Compass (v1.0.0.alpha.18)
// ----

.field
  position: relative
  font-family: Arial
  text-transform: uppercase
  font-weight: bold
  display: inline-block

label
  position: absolute
  left: 0
  top: 0
  transition: all .2s linear
  color: #999
  font-size: 10px

input
  margin-top: 15px
  border: 1px solid #999
  padding: 3px 2px

input:invalid + label
  top: 3px
  opacity: 0

input:valid + label
  opacity: 1
  top: 0

input:focus
  outline: none

input:focus + label
  color: #33A

SassMeister-output.css

.field {
  position: relative;
  font-family: Arial;
  text-transform: uppercase;
  font-weight: bold;
  display: inline-block;
}

label {
  position: absolute;
  left: 0;
  top: 0;
  transition: all .2s linear;
  color: #999;
  font-size: 10px;
}

input {
  margin-top: 15px;
  border: 1px solid #999;
  padding: 3px 2px;
}

input:invalid + label {
  top: 3px;
  opacity: 0;
}

input:valid + label {
  opacity: 1;
  top: 0;
}

input:focus {
  outline: none;
}

input:focus + label {
  color: #33A;
}

SassMeister-rendered.html

<form>
  <div class="field">
    <input type="text" pattern=".+" required="" placeholder="First Name"><label>First Name</label>
  </div>  <div class="field">
    <input type="text" pattern=".+" required="" placeholder="Last Name"><label>Last Name</label>
  </div>
</form>