form placeholder move

An-Anonymous-Pen.markdown

An Anonymous Pen

A Pen by A Non Ymous on CodePen.

License.

index.html

<!-- Inspired by http://dribbble.com/shots/1254439--GIF-Mobile-Form-Interaction -->
<div class="container">
  <form>
  <fieldset>
    <legend>Personal information</legend>
    <div class="form-group">
      <input type="text" placeholder="Surname" class="form-control" value="" required id="surname"/>
      <label for="surname">Surname</label>
    </div>
    <div class="form-group">
      <input type="text" placeholder="Givenname" class="form-control" value="" required id="givenname"/>
      <label for="givenname">Givenname</label>
    </div>
    <div class="form-group">
      <input type="text" placeholder="Birthday" class="form-control" value="" required id="birthday"/>
      <label for="birthday">Birthday</label>
    </div>
  </fieldset>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

script.js

/*
Attention when using the "pattern" attribute within the inputs! This will break the functionality. Also "required" will be obligatory for this animation to work.

Has anyone a better idea than solving it via :valid? Unfortunately there is no :empty selector on inputs and [value=""] only works on page load...
*/

style.less

.form-group {
  position: relative;
}
input.form-control, input.form-control:focus {
  padding-left: 0;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #aaa;
  box-shadow: none;
  margin-bottom: 20px;

  
  + label {
    opacity: 0;
    color: #bbb;
    font-size: 75%;
    position: absolute;
    top: 5px;
  }

  &:valid + label {
    @speed: .15s;
    @easing: ease-out;
    transition: top @speed @easing, opacity @speed @easing, color @speed @easing;
    opacity: 1;
    top: -5px;
  }
  
  &:focus + label {
    color: #0af;
  }
}