click inside the input fields to see what I am talking about...
input field, the label shrinks and moves to the upper-left of the field making way to receive the your input.
Now, type something in and click to the next field. Notice what just happened?
The label stays at the top out of the way of your inputted text.
HTML
<form class="fancyForm">
<div class="input-group">
<input type="text" id="name" name="name">
<label for="name">Your Name:</label>
</div>
<br/>
<div class="input-group">
<input type="email" id="email" name="email">
<label for="email">Your Email:</label>
</div>
<br/>
<div class="input-group">
<textarea id="msg_box" name="msg_box" rows="5"></textarea>
<label for="msg_box">Message:</label>
</div>
<br/>
<input type="submit" value="Submit">
</form>
CSS
input, textarea {
background: none;
border: solid 2px #66afe9;
color: #66afe9;
border-radius: 4px;
font-size: 18px;
min-width: 100%;
}
input[type="text"]focus,
input[type="email"]:active,
textarea:focus,
textarea:active {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}
input[type="submit"] {
padding: 15px 40px;
min-width: 60px;
}
input[type="submit"]:active {
background: #66afe9;
color: #ffffff;
font-weight: 700;
}
.input-group {
display: block;
position: relative;
}
.input-group input,
.input-group textarea {
padding: 15px 5px 5px 5px;
}
.input-group label {
position: absolute;
top: 30%;
left: 2%;
font-family: Cambria,"Times New Roman",Times,serif;
font-size: 18px;
font-style: italic;
color: #999999;
pointer-events: none;
-webkit-transition: all .3s ease-in-out;
transition: all .3 ease-in-out;
}
.input-group input:focus + label,
.input-group input.has-content + label,
.input-group textarea:focus + label,
.input-group textarea.has-content + label {
top: -10px;
left: 5px;
font-size: 12px;
color: #aaaaaa;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
JS
<script>
$(function() {
$('.fancyForm .input-group input, .fancyForm .input-group textarea').focusout(function() {
var text_val = $(this).val();
if (text_val === '') {
$(this).removeClass('has-content');
} else {
$(this).addClass('has-content');
}
});
});
</script>