Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save rajithwijepura/8969301 to your computer and use it in GitHub Desktop.
Save rajithwijepura/8969301 to your computer and use it in GitHub Desktop.
form placeholder move
<!-- 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>
/*
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...
*/
.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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment