<input class="codeInput" type="text" placeholder="Code">

<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/4763617-Code-Input-Field" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-1col-dnld-e29e0436f93d2f9c430fde5f3da66f94493fdca66351408ab0f96e2ec518ab17.png" alt=""></a>

$space: 8px;
$maxWidth: 240px;
$textColor: #727682;
$placeholderColor: #ADAFB6;
$borderColor: #E6E8F0;
$borderColorFocus: #5D9BFB;
$lineHeight: 40px;
$fontSize: 18px;
$fontSizeLabel: 14px;

.codeInput-container {
    max-width: $maxWidth;
    position: relative;
    & > input {
        display: none;
    }
    &:before {
        content: '';
        display: block;
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        border-bottom: 1px solid;
        border-color: $borderColor;
        transition: opacity .3s ease;
    }
    & > span {
        font-size: $fontSize;
        position: absolute;
        left: 0;
        z-index: 1;
        top: 0;
        right: 0;
        line-height: $lineHeight;
        display: block;
        color: $placeholderColor;
        transition: all .3s ease;
    }
    .inputs {
        display: flex;
        flex-flow: row nowrap;
        input {
            -webkit-appearance: none;
            opacity: 0;
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            flex: 1;
            padding: 0;
            min-width: 0;
            margin-right: $space;
            border: 0;
            border-bottom: 1px solid;
            border-color: $borderColor;
            background: none;
            line-height: $lineHeight;
            color: $textColor;
            text-align: center;
            font-size: $fontSize;
            outline: none;
            border-radius: 0;
            transition: all .3s ease;
            &:focus {
                border-color: $borderColorFocus;
            }
            &:last-child {
                margin-right: 0;
            }
        }
    }
    &.active {
        &:before {
            opacity: 0;
        }
        & > span {
            transform: translate(0, -100%);
            border-color: transparent;
            line-height: $lineHeight / 2;
            font-size: $fontSizeLabel;
            opacity: .6;
        }
        .inputs {
            input {
                opacity: 1;
            }
        }
    }
}

// Center
body {
    min-height: 100vh;
    font-family: Roboto, Lato, Arial;
    display: flex;
    justify-content: center;
    align-items: center;
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        opacity: .5;
        transition: all .4s ease;
        &:hover {
            opacity: 1;
        }
        img {
            display: block;
            height: 36px;
        }
    }
}

$(document).ready(function() {
    $('.codeInput').codeInput({
        number: 6
    });
});

jQuery.fn.codeInput = function(options) {

    var defaults = {
        number: 4,
        length: 1
    };

    var settings = $.extend({}, defaults, options);

    return this.each(function() {

        var self = $(this);
        var placeholder = self.attr('placeholder');
        var div = $('<div />').addClass('codeInput-container');

        div.append($('<span />').text(placeholder));

        self.replaceWith(div);

        div.append(self);

        var inputDiv = $('<div />').addClass('inputs');

        for(var i = 1; i <= settings.number; i++) {
            inputDiv.append($('<input />').attr({
                maxlength: settings.length
            }));
        }

        div.prepend(inputDiv);

        div.on('click touchstart', function(e) {
            if(!div.hasClass('active')) {
                div.addClass('active');
                setTimeout(function() {
                    div.find('.inputs input:first-child').focus();
                }, 400);
            }
        });

        div.find('.inputs').on('keyup input', 'input', function(e) {
            if($(this).val().toString().length >= settings.length || e.keyCode == 39) {
                $(this).next().focus();
            }
            if(e.keyCode == 8 || e.keyCode == 37) {
                $(this).prev().focus();
            }
            var value = '';
            div.find('.inputs input').each(function() {
                value = value + $(this).val().toString();
            });
            self.attr({
                value: value
            });
        });

        $(document).on('click touchstart', function(e) {
            if(!$(e.target).parent().is(div) && !$(e.target).parent().parent().is(div)) {
                var hide = true;
                div.find('.inputs input').each(function() {
                    if($(this).val().toString().length) {
                        hide = false;
                    }
                });
                if(hide) {
                    div.removeClass('active');
                    div.find('.inputs input').blur();
                } else {
                    div.addClass('active');
                }
            }
        });

    });

}