JSFiddle - React, Tailwind, and code Playground

by ZachWills

HTML

<label>Name:</label>
<input type="text" />

<div class="test">
    <label>Name:</label>
    <input type="text" />
</div>

CSS

.not-filled-in {
    color:#ccc;
}

JavaScript

;(function( $ ) {
    $.fn.prettyLabels = function() {
        $("label").each(function() {
            //make a variable for this label
            el = $(this);
            //get the value of the label
            label_value = el.html();
            //hide the label
            el.hide();
            //target the next sibling input and
            //fill it with the label's value
            el.next('input').val(label_value).addClass("not-filled-in");
        });
        $("input").focus(function () {
            //make a variable for this input
            el = $(this);
            //make a variable for it's current value
            input_value = el.val();
            //get the value that it's label is
            label_value = el.prev('label').html();
            //check to see if the current value matches the 
            //old label value
            if (input_value == label_value) {
                //if it does clear the form
                el.val('').removeClass("not-filled-in");
            }
        });
        $("input").blur(function () {
            el = $(this);
            if (el.val() == '') {
                label_value = el.prev('label').html();
                el.val(label_value).addClass("not-filled-in");
            }
        });
    };
}( jQuery ));

 // Usage example:
$("body").prettyLabels();