JQuery Custom Select Box

by Cerlin ST

HTML

<form>
    <div class="fieldWrap">
           <label for="jobnamesurname">Name &amp; Surname</label>
        <input type="text" id="jobnamesurname" name="Name &amp; Surname" />
    </div>
    <div>
        <input type="reset" name="reset" class="clearField" />    
        </div>        
</form>

CSS

.fieldWrap {
    position:relative;
    width:600px;
}
label {
  display: inline-block;
  width: 100%;
  margin-bottom: 5px;
  font-weight: normal;
  text-align: center;
  color: #666666;
  font-size: 15px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 38px;
  cursor: pointer;
    font-family:'Arial';
    text-transform:uppercase;
}
input[type="text"] {
  outline: none;
  background: #fff;
  border: 1px solid #0b4b84;
  color: #666666;
  text-align: center;
  width: 100%;
  font-size: 16px;
  float: left;
  padding: 8px;
}
.placeholder-hide label {
    display:none;
}
.placeholder-focus label {
    display:none;
}
.showPlText label {
    display:block;
}

JavaScript

jQuery.infieldLabel = function (el, options) {

        var base = this;

        base.$el =  jQuery(el);
        base.el = el;

        base.$el.data("infieldLabel", base);

        base.$input = null; 

        base.init = function () {
            base.options = $.extend({}, $.infieldLabel.defaultOptions, options);

            base.setup();
        };

        base.setup = function () {
            base.$input = base.$el.find("input[type=text]");

            // hide label if there's already a value
            base.blur();

            // bind events
            base.bind();
        };

        // binds the focus, blur and change events
        base.bind = function () {
            base.$input.on("focus.infield", function () {
                base.$el.removeClass(base.options.hideClass)
                    .addClass(base.options.focusClass);

            }).on("blur.infield change.infield", function () {
                base.blur();
            });
        };

        base.blur = function () {
            if (base.$input.val() !== "") {
                base.$el.removeClass(base.options.focusClass)
                    .addClass(base.options.hideClass);

            } else {
                base.$el.removeClass(base.options.focusClass + " " + base.options.hideClass);
            }
        };

        base.init();
    };

     jQuery.infieldLabel.defaultOptions = {
        focusClass: "placeholder-focus",
        hideClass: "placeholder-hide"
    };

     jQuery.fn.infieldLabel = function (options) {
        this.each(function () {
            (new $.infieldLabel(this, options));
        });
    };
 jQuery('.fieldWrap').infieldLabel(); 
jQuery(".clearField").click(function(){
    var inputVal = jQuery(".fieldWrap input").val();
    if(inputVal != ''){
        jQuery(".fieldWrap input").val('');
        jQuery(".fieldWrap").removeClass('placeholder-hide');
    }
});