A Pen by Robin Brons.

index.html

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

  <div class="row">
    <div class="large-6 large-centered columns">
      <form action="#" class="fancy-form">
        <!-- Name fields -->
        <div class="row">
          <div class="large-6 small-6 columns">
            <input type="text" name="fname" id="fname" required />
            <label for="fname">Firstname</label>
          </div>
          <div class="large-6 small-6 columns">
            <input type="text" name="lname" id="lname" required />
            <label for="lname">Lastname</label>
          </div>
        </div>
        <!-- Email field -->
        <div class="row">
          <div class="large-12 columns">
            <input type="email" name="email" id="email" required />
            <label for="email">Email</label>
          </div>
        </div> 

        <!-- Password fields -->
        <div class="row">
          <div class="large-6 small-6 columns">
            <input type="password" name="passw" id="passw" required />
            <label for="passw">Password</label>
          </div>
          <div class="large-6 small-6 columns">
            <input type="password" name="rpassw" id="rpassw" required />
            <label for="rpassw">Re-type password</label>
          </div>
        </div>

        <!-- DoB fields -->
        <div class="row">
          <div class="large-4 columns select-dd">
            <select name="day">
              <option value="0" disabled selected>Day</option> 
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
              <option value="13">13</option>
              <option value="14">14</option>
              <option value="15">15</option>
              <option value="16">16</option>
              <option value="17">17</option>
              <option value="18">18</option>
              <option value="19">19</option>
              <option value="20">20</option>
              <option value="21">21</option>
              <option value="22">22</option>
              <option value="23">23</option>
              <option value="24">24</option>
              <option value="25">25</option>
              <option value="26">26</option>
              <option value="27">27</option>
              <option value="28">28</option>
              <option value="29">29</option>
              <option value="30">30</option>
              <option value="31">31</option>
            </select>  
          </div>
          <div class="large-4 columns select-dd">
            <select name="month">
              <option value="0" disabled selected>Month</option>
              <option value="1">January</option>
              <option value="2">February</option>
              <option value="3">March</option>
              <option value="4">April</option>
              <option value="5">May</option>
              <option value="6">June</option>
              <option value="7">July</option>
              <option value="8">August</option>
              <option value="9">September</option>
              <option value="10">October</option>
              <option value="11">November</option>
              <option value="12">December</option>
            </select>  
          </div>
          <div class="large-4 columns end">
            <input type="number" name="year" id="year" min="1900" max="2014" patern="" required />
            <label for="year">Year</label>
          </div>
        </div>
        <div class="row">
          <div class="large-4 large-offset-8 columns">
            <button type="submit">
              Sign up
              <i class="fa fa-angle-right"></i>
            </button>
          </div>
        </div>
      </form>  
    </div>
  </div> 

rydAg.markdown

rydAg

It's not (yet) perfect. When a field is invalid the label goes back to the middle, that shouldn't happen. You can fix this with :invalid but then when the page is loaded the labels are at the top of the field.

A Pen by Robin Brons on CodePen.

License.

script.js

// No Javascript 

// It's not (yet) perfect. When a field is invalid the
// label goes back to the middle, that shouldn't happen.
// You can fix this with :invalid but then when the page
// is loaded the labels are at the top of the field. 

style.scss

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800);

/* Variables */
$radius: 0;

  /* Colors */
  $white: hsl(0,0%,100%);
  $valid: hsl(86,52%,56%);
  $invalid: hsl(7,71%,55%);
  $label-color: #A6A7AA;
  $text: hsl(0,0%,10%);

body {
  background: #F1F2F2;

  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
} 

* {
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

form.fancy-form {
  margin-top: 40px;

  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"] {
    border-color: $white;
    border-radius: $radius;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    color: $text;
    padding: 0.7rem 0.7rem 0 0.5rem;
    font-size: 14px;
  }
  
  .select-dd {
    position: relative;
    
    select {
      display: block;
      border-color: $white;
      border-radius: $radius;
      outline: none;
      background-color: $white;
      background-image: none;

      color: $text;
      padding: 0.7rem 0.5rem;
      font-size: 14px;
      position: relative;

      option.first {
        color: $label-color;
      }
    }
    &:after {
      width: 38px;
      height: 38px;
      display: block;
      border-left: 1px solid lighten($label-color, 30%);
      position: absolute;
      top: 0;
      right: 15px;
      
      content: '\f107';
      padding: 0.8rem 0 0 ;
      font-family: FontAwesome;
      text-align: center;
    }
  }

  .columns {
    position: relative;

    label {
      position: absolute;
      left: 24px;
      top: 12px;

      color: $label-color;
      font-size: 0.875rem;
      transition: font-size .1s,
        top .1s;
    }
    input:focus,
    input:valid {
      border-color: $white;
      background-color: $white;

      & + label {
        top: 4px;
        font-size: 0.6rem;
      }
    }
  }
  button[type="button"],
  button[type="submit"],
  button[type="reset"]{
    width: 100%;
    background-color: tomato;
    border-radius: $radius;
    outline: none;
    
    padding: 0.7rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 700!important;
    text-shadow: 0 1px 1px hsla(0,0%,.0%,.3);
    
    i {
      font-weight: 800!important;
    }
  }
}