<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="[ container ]"> <div class="[ row ]"> <h2 class="[ text-center ]">Good Comment!</h2> </div> </div> <div class="[ container ]"> <div class="[ row ]"> <div class="[ col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-4 col-md-4 ]"> <div class="[ form-group ]"> <input id="floatingLabels" name="floatingLabels" placeholder="Floating Comment" class="[ form-control ]" data-toggle="floatLabel" data-value="no-js"> <label for="floatingLabels" style="">Thanks for the Comment!</label> </div> </div> </div> <div class="[ row ]"> <div class="[ col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-4 col-md-4 ]"> <div class="[ form-group ]"> <input id="floatingLabelsRequired" name="floatingLabelsRequired" placeholder="Got a Comment?" class="[ form-control ]" required data-toggle="floatLabel" data-value="no-js"> <label for="floatingLabelsRequired" style="">Thank you!</label> </div> </div> </div> <div class="[ row ]"> <div class="[ col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-4 col-md-4 ]"> <div class="[ form-group ][ form-group-textarea ]"> <textarea id="customStyle" name="customStyle" placeholder="Write a Comment" class="[ form-control ]" data-toggle="floatLabel" data-value="no-js"></textarea> <label for="customStyle" style="">That's Nice!</label> </div> </div> </div> </div> <!-- SCRIPT NOT NEEDED ONLY USED TO MAKE TEXTAREA AUTO RESIZE --> <script src="//cdnjs.cloudflare.com/ajax/libs/autosize.js/1.18.17/jquery.autosize.min.js"></script> <script>$('textarea').autosize({ append: false });</script>

/* Not Need */ @import url(http://fonts.googleapis.com/css?family=Roboto:500); body { background-color: rgb(230, 235, 240); } /* Basic Style */ .form-group { position: relative; } .form-group [data-toggle="floatLabel"] { height: 44px; padding-top: 16px; } .form-group [data-toggle="floatLabel"] + label { font-size: 12px; left: 12px; opacity: 1; position: absolute; top: 3px; transition: all 0.3s ease-in-out; } .form-group [data-toggle="floatLabel"]:required + label { color: rgb(255, 0, 0); } /* Custom Styles */ .form-group.form-group-textarea { background-color: rgb(255, 255, 255); border-radius: 1px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); margin: 20px 15px ; padding: 10px 0px 2px; position: relative; } .form-group.form-group-textarea textarea { height: 34px; resize: none; } .form-group.form-group-textarea label { color: rgb(160, 160, 160); font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 500; } .form-group.form-group-textarea .form-control { border-radius: 0px; border-width: 0px; box-shadow: none; } .form-group.form-group-textarea [data-toggle="floatLabel"] + label { top: 5px; } /* Positioning */ .form-group [data-toggle="floatLabel"][data-value=""] { padding-top: 6px; } .form-group [data-toggle="floatLabel"][data-value=""] + label { opacity: 0; top: 18px; }

$(document).ready(function(){ // Floating Labels //============================================================== $('[data-toggle="floatLabel"]').attr('data-value', $(this).val()).on('keyup change', function() { $(this).attr('data-value', $(this).val()); }); });