Skip to content

Instantly share code, notes, and snippets.

@zhenghao1

zhenghao1/Clean-Animated-Input-Labels.markdown

Created February 20, 2014 18:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save zhenghao1/9119968 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save zhenghao1/9119968 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Oliver Knoblich.
Raw
Clean-Animated-Input-Labels.markdown
Raw
index.html
<div class="title">
<span>Clean Animated Input Labels</span>
without placeholder attribute and focus selector to support IE 7-9
</div>
<div class="demo demo1">
<div class="css">
<label for="d1">NAME</label>
<input id="d1" type="text" />
</div>
<div class="css">
<label for="d2">NAME</label>
<input id="d2" type="text" />
</div>
</div>
<div class="demo demo2">
<div class="css">
<label for="d3">NAME</label>
<input id="d3" type="text" />
</div>
<div class="css">
<label for="d4">NAME</label>
<input id="d4" type="text" />
</div>
</div>
<div class="demo demo3">
<div class="css">
<label for="d5">NAME</label>
<input id="d5" type="text" />
</div>
<div class="css">
<label for="d6">NAME</label>
<input id="d6" type="text" />
</div>
</div>
<div class="demo demo4">
<div class="css">
<label for="d7">NAME</label>
<input id="d7" type="text" />
</div>
<div class="css">
<label for="d8">NAME</label>
<input id="d8" type="text" />
</div>
</div>
<div class="demo demo5">
<div class="css">
<label for="d9">NAME</label>
<input id="d9" type="text" />
</div>
<div class="css">
<label for="d10">NAME</label>
<input id="d10" type="text" />
</div>
</div>
<div class="demo demo6">
<div class="css">
<label for="d11">NAME</label>
<input id="d11" type="text" />
</div>
<div class="css">
<label for="d12">NAME</label>
<input id="d12" type="text" />
</div>
</div>
<div class="demo demo7">
<div class="css">
<label for="d13">NAME</label>
<input id="d13" type="text" />
</div>
<div class="css">
<label for="d14">NAME</label>
<input id="d14" type="text" />
</div>
</div>
<div class="demo demo8">
<div class="css">
<label for="d15">NAME</label>
<input id="d15" type="text" />
</div>
<div class="css">
<label for="d16">NAME</label>
<input id="d16" type="text" />
</div>
</div>
<div class="demo demo9">
<div class="css">
<label for="d17">NAME</label>
<input id="d17" type="text" />
</div>
<div class="css">
<label for="d18">NAME</label>
<input id="d18" type="text" />
</div>
</div>
<div class="demo demo10">
<div class="css">
<label for="d19">NAME</label>
<input id="d19" type="text" />
</div>
<div class="css">
<label for="d20">NAME</label>
<input id="d20" type="text" />
</div>
</div>
Raw
script.js
$(document).ready(function() {
$('input').each(function() {
$(this).on('focus', function() {
$(this).parent('.css').addClass('active');
});
$(this).on('blur', function() {
if ($(this).val().length == 0) {
$(this).parent('.css').removeClass('active');
}
});
if ($(this).val() != '') $(this).parent('.css').addClass('active');
});
});
Raw
style.scss
@import "compass";
@import url('http://fonts.googleapis.com/css?family=Roboto');
$b: #aaa;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 16px/1 'Roboto', sans-serif;
text-align: center;
color: #555;
background: #ddd;
}
.title {
padding: 35px 0 40px;
color: #999;
border-bottom: 1px solid $b;
}
.title span {
display: block;
margin: 0 0 15px;
font-size: 30px;
color: #555;
}
.demo {
padding: 35px 0;
border-bottom: 1px solid $b;
background: #eee;
}
.demo:nth-child(odd) {
background: none;
}
.demo:last-child {
border: 0;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
vertical-align: baseline;
border: 0;
outline: 0;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input[type='text'] {
width: 220px;
padding: 10px 10px 12px 60px;
font-size: 12px;
color: #555;
border: 1px solid $b;
background-color: #fff;
}
.css {
display: inline-block;
position: relative;
margin: 0 5px 0 0;
}
.css input {
transition: .1s all linear;
}
.css label {
position: absolute;
top: 13px;
left: 15px;
font-size: 12px;
color: #aaa;
transition: .1s all linear;
cursor: text;
}
.demo1 .css.active input {
padding-left: 45px;
}
.demo1 .css.active label {
left: 6px;
opacity: .5;
}
.demo2 .css.active input {
padding-left: 15px;
}
.demo2 .css.active label {
top: 3px;
font-size: 9px;
opacity: .8;
}
.demo3 .css.active input {
padding-left: 15px;
}
.demo3 .css.active label {
top: -18px;
}
.demo4 .css.active input {
padding-left: 15px;
}
.demo4 .css.active label {
top: 0;
left: 0;
font-size: 40px;
opacity: .1;
}
.demo5 .css.active label {
top: 8px;
left: 10px;
padding: 5px;
color: #fff;
background: $b;
}
.demo6 .css.active input {
padding-left: 70px;
}
.demo6 .css.active label {
top: 0;
left: 0;
padding: 14px;
color: #fff;
background: $b;
}
.demo7 .css.active label {
top: 8px;
left: 10px;
padding: 5px;
background: #eee;
box-shadow: inset 0 0 0 1px $b;
}
.demo8 .css.active input {
padding-left: 25px;
}
.demo8 .css.active label {
top: 15px;
left: 0;
font-size: 10px;
transform: rotate(-90deg);
}
.demo9 .css.active input {
padding-left: 15px;
}
.demo9 .css.active label {
top: -15px;
left: 0;
padding: 3px 5px;
font-size: 10px;
color: #fff;
background: $b;
}
.demo10 .css.active input {
padding-left: 15px;
}
.demo10 .css.active label {
top: 39px;
left: 0;
width: 220px;
padding: 3px 5px;
font-size: 10px;
color: #fff;
background: $b;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment