Floating inputs

by Maksim Kachurin

HTML

<div class="content">
    <input type="email" placeholder="First Name" class="test1">
    <input type="text" placeholder="Last Name" value="Test" class="test2">
</div>

SCSS

body {
    background: #ddd;
    color: #dadada;
    font-size: 12px;
    font-family: sans-serif;
}

.content {
    margin-top: 50px;
}

.test1,
.test2{
    padding: 4px 10px;
    border: none;
    border-bottom: 1px solid #ccc;
    background: none;
    color: #464748;
    &:focus {
        border-color: #dd3345;  
        outline:none;
    }
}

// поле держатель
.floaty-ffd {
  display: inline-block;
  position: relative;
  padding-top: 15px;
}

.floaty-ffd label {
  position: absolute;
  left: 0;
  top: 15px;
  transition: all 0.1s linear;
  color: #999;
  opacity: 1;
  font-size: 1em;
  will-change: font-size;
}

.floaty-ffd input,
.floaty-ffd textarea,
.floaty-ffd select {
  position: relative;
  z-index: 10;
  font-size: 1em;
  background: none;
}

.floaty-ffd input:not(.empty) + label,
.floaty-ffd input:focus + label,
.floaty-ffd textarea:not(.empty) + label,
.floaty-ffd textarea:focus + label,
.floaty-ffd select:not(.empty) + label,
.floaty-ffd select:focus + label {
  top: 0 !important;
  left: 0 !important;
  z-index: 0;
  font-size: 10px;
}

.floaty-ffd input:focus + label,
.floaty-ffd textarea:focus + label,
.floaty-ffd select:focus + label {
  color: #333;
}

JavaScript

(function ($) {
    jQuery.fn.floaty = function (options) {
        options = $.extend({

        }, options);

        var template = $([
            '<div class="floaty-ffd">',
            '<label></label>',
            '</div>'].join(''));

        var make = function () {

            var field = $(template).clone(),
                input = $(this),
                input_css = {
                    'margin-top': $(this).css('margin-top'),
                        'margin-left': $(this).css('margin-left'),
                        'padding-top': $(this).css('padding-top'),
                        'padding-left': $(this).css('padding-left'),
                        'height': $(this).css('height'),
                        'font-size': $(this).css('font-size')
                },
                label = $(input).attr('placeholder'),
                value = $(input).val();

            // remove placeholder
            $(input).attr('placeholder', '');

            // add label
            $('label', field).html(label);
            if (!value) {
                $(input).addClass('empty');
            }

            // get style!
            $('label', field).css({
                'margin-left': input_css['margin-left'],
                    'top': (13 + (parseInt(input_css.height) - parseInt(input_css['font-size'])) / 2 + parseInt(input_css['margin-top']) + parseInt(input_css['padding-top'])),
                    'left': parseInt(input_css['padding-left'])
            });

            // event
            $(input).on('blur', function () {
                $(this).toggleClass('empty', !$(this).val());
            });

            // finally, replace it!
            $(this).after(field);

            // add input to field
            $(field).prepend(input);


        };
        return this.each(make);
    };
})(jQuery);



var inputs = $('input:not(input[type=button]):not(input[type=submit]), textarea');

$(inputs).floaty();