Float Placeholder
html{
background: #eee;
}
body{
margin: 50px auto;
padding: 50px;
max-width: 600px;
background: #fff;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 0 10px #ccc;
}
.float-placeholder{
border-radius: 3px;
border: 1px solid #ccc;
position: relative;
height:50px;
line-height: 50px;
}
.float-placeholder-label,
.float-placeholder-input{
text-indent: 10px;
transition: font-size 160ms;
transition: line-height 160ms;
}
.float-placeholder-label{
position: absolute;
top: 0;
left: 0;
height: inherit;
line-height: inherit;
}
.float-placeholder-input{
position: absolute;
bottom: 0;
left: 0;
background: transparent;
width: 100%;
border: 0;
height: 40px;
line-height: 40px;
}
.float-placeholder-input::-webkit-input-placeholder{
color: transparent;
}
.float-placeholder-input:focus{
outline: 0;
}
.is-focused{
border: 1px solid #006CFF;
}
.is-floating .float-placeholder-input{
height: 50px;
line-height: 50px;
}
.is-floating + .float-placeholder-label{
color: #999;
font-size: 11px;
line-height: 20px;
height: 20px
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
var $inputs = $('.float-placeholder-input'),
update = function(){
var $input = $(this),
$wrapper = $input.closest('.float-placeholder');
if( $input.val() !== '' || $input.is(':focus') || $input.prop('tagName') === 'SELECT'){
$input.addClass('is-floating');
} else {
$input.removeClass('is-floating');
}
if($input.is(':focus')){
$wrapper.addClass('is-focused');
} else {
$wrapper.removeClass('is-focused');
}
};
$inputs.each( update );
$inputs.on('click focus input blur', update);
<div class="float-placeholder">
<input type="text" id="name" placeholder="What is your name?" class="float-placeholder-input">
<label for="name" class="float-placeholder-label">Name</label>
</div>
<br>
<div class="float-placeholder">
<select id="state" class="float-placeholder-input">
<option>California</option>
<option>Colorado</option>
</select>
<label for="name" class="float-placeholder-label">Name</label>
</div>