Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="fields-text">
    <div class="field" data-field="text">
        <label class="field-main">
            <input type="text" name="" placeholder="Write what you want !">
            <span class="label"><i class="fa-align-left"></i> Text</span>
        </label>
    </div>
    
    <div class="field" data-field="text">
        <label class="field-main">
            <input type="text" name="" placeholder="Un texte" value="You can set a value with the attribute" maxlength="255">
            <span class="label"><i class="fa-align-left"></i> Have you notice the max length ?</span>
        </label>
    </div>
    
    <div class="field" data-field="text">
        <label class="field-main">
            <textarea name="" placeholder="Will grow up with your text"></textarea>
            <span class="label"><i class="fa-align-left"></i> Textarea</span>
        </label>
    </div>
</div>

<div class="fields-logs">
    <div class="field" data-field="text">
        <label class="field-main">
            <input type="email" name="" placeholder="Logs managed are by button's styles" value="bad-email">
            <span class="label"><i class="fa-envelope"></i> Email</span>
        </label>
    </div>
    
    <div class="field" data-field="text">
        <label class="field-main">
            <input type="email" name="" placeholder="There's a function in JS to automate logs integration" value="good-email@ndd.com">
            <span class="label"><i class="fa-envelope"></i> Email</span>
        </label>
    </div>
</div>

<div class="fields-actions">
    <div class="field" data-field="text">
        <label class="field-main">
            <input type="password" name="" placeholder="Check my generator !" required>
            <span class="label"><i class="fa-key"></i> Password (required)</span>
        </label>
        
        <div class="field-btns">
            <button type="button" class="field-reveal btn ic gr xs">
                <span class="icn">
                    <i class="fa-eye"></i>
                    <i class="fa-eye-slash"></i>
                </span>
            </button>
        </div>
    </div>
    
    <div class="field" data-field="text">
        <label class="field-main">
            <input type="number" min="0" max="50" step="5" name="" placeholder="Set attributes to improve your field !">
            <span class="label"><i class="fa-calculator"></i> Number</span>
        </label>
        
        <div class="field-btns">
            <button type="button" class="field-decrement btn ic gr xs">
                <span class="icn"><i class="fa-minus"></i></span>
            </button>
            <button type="button" class="field-increment btn ic gr xs">
                <span class="icn"><i class="fa-plus"></i></span>
            </button>
        </div>
    </div>
    
    <div class="field" data-field="text">
        <label class="field-main">
            <input type="search" name="" placeholder="Search something and find. Or not.">
            <span class="label"><i class="fa-magnifying-glass"></i> Field search</span>
        </label>
        
        <div class="field-btns">
            <button type="button" class="field-clear btn ic gr xs">
                <span class="icn"><i class="fa-xmark"></i></span>
            </button>
            <button type="button" class="field-toggle btn ic gr xs">
                <span class="icn">
                    <i class="fa-plus"></i>
                    <i class="fa-minus"></i>
                </span>
            </button>
        </div>
        
        <div class="field-more _abs">This div is a way to have more stuff with these fields, for example some search results or options.</div>
    </div>
</div>

<div class="fields-check">
    <div class="field" data-field="check">
        <label class="field-main">
            <input type="checkbox" name="">
            <span class="label">Checkbox</span>
        </label>
    </div>
    
    <div class="field" data-field="check">
        <label class="field-main">
            <input type="radio" name="radio">
            <span class="label">Radio</span>
        </label>
        <label class="field-main">
            <input type="radio" name="radio">
            <span class="label">More radio</span>
        </label>
    </div>
</div>

<div class="fields-select">
    <div class="field" data-field="select">
        <label class="field-main">
            <span class="input" data-placeholder="Finally a way to style them entirely"></span>
            <select name=""><option label=""></option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
                <option value="4">Option 4</option>
            </select>
            <span class="label"><i class="fa-list"></i> Select</span>
        </label>
        
        <div class="field-btns">
            <button type="button" class="field-open btn ic gr xs">
                <span class="icn">
                    <i class="fa-angle-down"></i>
                    <i class="fa-angle-up"></i>
                </span>
            </button>
        </div>
    </div>
    
    <div class="field" data-field="select">
        <label class="field-main">
            <span class="input" data-placeholder="If required, you can't reset after selection"></span>
            <select name="" required><option label=""></option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
                <option value="4">Option 4</option>
            </select>
            <span class="label"><i class="fa-list"></i> Select</span>
        </label>
        
        <div class="field-btns">
            <button type="button" class="field-open btn ic gr xs">
                <span class="icn">
                    <i class="fa-angle-down"></i>
                    <i class="fa-angle-up"></i>
                </span>
            </button>
        </div>
    </div>
    
    <div class="field" data-field="select">
        <label class="field-main">
            <span class="input" data-placeholder="Select multiple with custom separators" data-separator=", ||| and "></span>
            <select name="" multiple><option label=""></option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
                <option value="4">Option 4</option>
            </select>
            <span class="label"><i class="fa-list"></i> Select</span>
        </label>
        
        <div class="field-btns">
            <button type="button" class="field-open btn ic gr xs">
                <span class="icn">
                    <i class="fa-angle-down"></i>
                    <i class="fa-angle-up"></i>
                </span>
            </button>
        </div>
    </div>
    
    <div class="field" data-field="select">
        <label class="field-main">
            <span class="input" data-placeholder="Select multiple, options group and limit" data-separator=", ||| et "></span>
            <select name="" multiple="" data-limit="3"><option label=""></option>
                <optgroup label="Group 1">
                    <option data-keywords="More keywords for search">Option 1.1</option>
                    <option>Option 1.2</option>
                    <option>Option 1.3</option>
                </optgroup>
                <optgroup label="Group 2">
                    <option>Option 2.1</option>
                    <option>Option 2.2</option>
                </optgroup>
            </select>
            <span class="label"><i class="fa-list"></i> Select</span>
        </label>
        
        <div class="field-btns">
            <button type="button" class="field-clear btn ic gr xs">
                <span class="icn"><i class="fa-xmark"></i></span>
            </button>
            <button type="button" class="field-open btn ic gr xs">
                <span class="icn">
                    <i class="fa-angle-down"></i>
                    <i class="fa-angle-up"></i>
                </span>
            </button>
        </div>
    </div>
</div>

<div class="fields-file">
    <div data-field="file">
        <label class="field-main">
            <span class="input" data-placeholder="Import file"></span>
            
            <input type="file" name="">
            <span class="label"><i class="fa-file"></i> File</span>
        </label>
        
        <div class="field-btns">
            <button type="button" class="field-browse btn gr xs"><span>Browse</span></button>
            <button type="button" class="field-clear btn ic gr xs">
                <span class="icn"><i class="fa-xmark"></i></span>
            </button>
        </div>
    </div>
    
    <div data-field="file">
        <label class="field-main">
            <span class="input" data-placeholder="Import several files"></span>
            
            <input type="file" multiple name="">
            <span class="label"><i class="fa-copy"></i> Files</span>
        </label>
        
        <div class="field-btns">
            <button type="button" class="field-browse btn gr xs"><span>Browse</span></button>
            <button type="button" class="field-clear btn ic gr xs">
                <span class="icn"><i class="fa-xmark"></i></span>
            </button>
        </div>
    </div>
</div>

<div class="fields-date">
    <div data-field="date" data-date-minmax="+0d/+2m" data-date-disabled="0/6">
        <label class="field-main">
            <span class="input" data-placeholder="Pick a date"></span>
            <input type="text" name="" placeholder="Pick a date">
            <span class="label"><i class="fa-calendar-day"></i> Date picker</span>
        </label>
    </div>
    
    <div data-field="date" data-date-mode="range">
        <label class="field-main">
            <span class="input" data-placeholder="Pick dates between two" data-date-format="dd/mm/yyyy" data-separator=" > "></span>
            <input type="text" name="" placeholder="Pick dates between two">
            <span class="label"><i class="fa-calendar-week"></i> Dates range</span>
        </label>
    </div>
    
    <div data-field="date" data-date-mode="multiple|||4" data-date-disabled="2021-08-30/holiday">
        <label class="field-main">
            <span class="input" data-placeholder="Pick several dates" data-date-format="dd/mm/yyyy" data-separator=", "></span>
            <input type="text" name="" placeholder="Pick several dates">
            <span class="label"><i class="fa-calendar-days"></i> Dates select</span>
        </label>
    </div>
    
    <div data-field="date" data-date-mode="simple" data-date-flat="">
        <label class="field-main">
            <span class="input" data-placeholder="Pick dates inline" data-date-format="dd/mm/yyyy" data-separator=", "></span>
            <input type="text" name="" placeholder="Pick dates inline">
            <span class="label"><i class="fa-calendar-check"></i> Dates inline</span>
        </label>
    </div>
</div>
              
            
!

CSS

              
                // Hi ! Do you know if there's a way to import external SCSS code ?
// ----------------------------------------------------------------
$bg: rgb(var(--bg)); $bgd: rgb(var(--bgd)); $bgl: rgb(var(--bgl));
$de: rgb(var(--de)); $ded: rgb(var(--ded)); $del: rgb(var(--del));
$mc: rgb(var(--mc)); $mcd: rgb(var(--mcd)); $mcl: rgb(var(--mcl));
$gr: rgb(var(--gr)); $grd: rgb(var(--grd)); $grl: rgb(var(--grl));
$bl: #000; $wh: #fff; $tr: transparent;
$ld: rgb(var(--ld)); $ls: rgb(var(--ls)); $lw: rgb(var(--lw)); $le: rgb(var(--le));
$mf: var(--mf); $cf: var(--cf);
$if: var(--if); $iw: var(--iw); $br: var(--br);
$sz: var(--sz); $rg: var(--rg); $bd: var(--bd); $lh: var(--lh);
$radius: var(--radius);
$shadow: var(--shadow); $shadow-hover: var(--shadow-hover);
@mixin rwd($width, $type: max){
    $pdr: (
        xs :  375px,
        sm :  576px,
        md :  768px,
        lg :  992px,
        xl : 1200px,
        ex : 1400px
    );
    
    @if($width == 'portrait' or $width == 'landscape'){
        @media (orientation: unquote($width)){
            @content;
        }
    }
    @else{
        @if($width == 'de' or $width == de){
            @content;
        }
        @else{
            @if(type-of($width) == 'number' and str-index(quote($width), px) == null){
                $width: $width + px;
            }
            
            
            @if(str-index($width, 'min') != null){
                $width: str-replace($width, 'min', '');
                $type: min;
            }
            @if(str-index($width, 'max') != null){
                $width: str-replace($width, 'max', '');
                $type: max;
            }
            
            @if map_has_key($pdr, $width) {
                $width: map_get($pdr, $width);
            }
            
            
            @if type-of($width) == 'string' {
                $width: str-to-number($width);
            }
            
            @if $type == max {
                $width: ($width - 1px);
            }
            
            @media (#{$type}-width: $width){
                @content;
            }
        }
    }
}
@function rgba($c...){
    @if(length($c) == 4){
        @return #{'rgba(' nth($c, 1) ',' nth($c, 2) ','  nth($c, 3) ','  nth($c, 4) ')'};
    }
    
    @if(length($c) == 2){
        $color: nth($c, 1);
        $alpha: nth($c, 2);
        
        @if(type-of($color) == 'color'){
            $color_red:   red($color);
            $color_green: green($color);
            $color_blue:  blue($color);
            
            @return #{'rgba(' $color_red ',' $color_green ','  $color_blue ',' $alpha ')'};
        }
        @else{
            @if(str-index($color, 'var(') != 1){
                $color: str-replace($color, '))', ')');
                $color: str-replace($color, 'rgb(', '');
                $color: str-replace($color, 'hsl(', '');
            }
            
            @return #{'rgba(' $color ',' $alpha ')'};
        }
    }
}
// ----------------------------------------------------------------



// Fields 
@mixin placeholder(){
    font: inherit;
    color: $del;
}

[data-field]{
    --field-height: 60px;
    --field-padding: 20px;
    
    
    width: 100%;
    min-height: var(--field-height);
    
    border-radius: $radius;
    background-color: $wh;
    box-shadow: $shadow;
    
    text-align: left;
    
    transition: all 180ms ease-in-out;
    
    & > label{
        display: block;
        width: 100%; min-height: var(--field-height);
        
        & > *{
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;
            
            width: 100%; height: var(--field-height);
            
            padding-left: var(--field-padding);
            padding-right: var(--field-padding);
        }
        
        [name], .input{
            display: block;
            
            padding-top: calc(var(--field-height) * .25);
            
            opacity: 0;
            transition: opacity 180ms ease-in-out;
        }
        
        [name]{
            &[value]{
                opacity: 1;
                
                & + span{
                    height: calc(var(--field-height) * .45);
                    padding-top: .5em;
                    
                    font-size: .7em;
                }
            }
            
            &[required] + span{
                &:after{
                    content: "*";
                    font: inherit;
                    
                    margin-left: 5px;
                }
            }
            
            &::-webkit-input-placeholder{@include placeholder();}
            &:-moz-placeholder{@include placeholder();}
            &::-moz-placeholder{@include placeholder();}
            &:-ms-input-placeholder{@include placeholder();}
        }
        
        textarea[name]{
            position: relative;
            min-height: var(--field-height); max-height: 120px;
            
            padding-top: calc(var(--field-height) * .25 + ((var(--field-height) * .75 - (#{$lh} * 1em)) / 2));
            
            &.height{
                padding-bottom: calc((var(--field-height) * .75 - (#{$lh} * 1em)) / 2);
            }
        }
        
        .input{
            z-index: 6;
            
            display: flex;
            align-items: center;
            
            width: 100%;
            overflow: auto;
            white-space: nowrap;
            
            & + [name]{
                opacity: 0 !important;
            }
            
            &:empty[data-placeholder]{
                &:before{
                    display: block;
                    width: 100%;
                    
                    overflow: hidden;                    
                    text-overflow: ellipsis;
                    
                    content: attr(data-placeholder);
                    @include placeholder();
                }
            }
        }
        
        .label{
            display: flex;
            justify-content: flex-start; align-items: center;
            height: var(--field-height);
            
            color: $del;
            
            transition: all 180ms ease-in-out;
            
            i{
                width: 1em;
                text-align: center;
                margin-right: .75em;
            }
            
            .maxlength{
                display: flex;
                margin-left: .5em;
                
                &[data-maxlength="0"]{
                    display: none;
                }
                
                & > *:nth-child(n+2){
                    &:before{
                        content: "/";
                        margin: 0 .15em;
                    }
                }
            }
        }
    }
    
    
    &:hover,
    &.focus, &.focus-only,
    &.force{
        box-shadow: $shadow-hover;
    }
    
    &.focus, &.focus-only{
        
    }
    &.fill{
        
    }
    
    &:not(.fill){
        .field-clear{
            display: none;
        }
    }
    
    &.focus,
    &.fill,
    &.force{
        & > label{
            [name], .input{
                opacity: 1;
            }
            
            textarea[name]{
                & + .label{
                    &:before{
                        opacity: 1;
                        transition: opacity 0ms ease-in-out 180ms;
                    }
                }
            }
            
            .label{
                height: calc(var(--field-height) * .45);
                padding-top: .5em;
                
                font-size: .7em;
                
                .maxlength{
                    display: flex;
                }
            }
        }
    }
}

[data-field="text"]{
    &, & > label, & > label *{
        cursor: text;
    }
    
    & > label{
        .label{
            &:before{
                content: "";
                
                position: absolute; z-index: -1;
                top: 0; right: 0; left: 0; bottom: 0;
                    
                background-color: $wh;
                border-radius: $radius $radius 0 0;
                
                opacity: 0;
                transition: opacity 0ms ease-in-out;
            }
        }
    }
}

[data-field="check"]{
    &, & > label, & > label *{
        cursor: pointer;
    }
    
    & > label{
        & + label{
            &:before{
                content: "";
                
                position: absolute;
                top: 0; right: var(--field-padding); left: var(--field-padding);
                
                display: block;
                height: 1px;
                
                border-top: 1px solid $gr;
            }
        }
        
        [name]{
            width: 1px; height: 1px;
            padding: 0;
        }
        
        .label{
            // user-select: none;
            
            &:before, &:after{
                content: "";
                
                order: -1;
                
                display: block;
                width: 1em; height: 1em;
                
                border: 1px solid currentColor;
                border-radius: 4px;
            }
            
            &:before{
                
            }
            &:after{
                background-color: currentColor;
                
                margin-left: -1em;
                margin-right: 10px;
                
                border-radius: 3px;
                
                transform: scale(.7);
                transition: transform 180ms ease-in-out;
            }
        }
        
        input{
            &[type="radio"] + .label{
                &:before, &:after{
                    border-radius: 50%;
                }
            }
            
            &:not(:checked) + .label{
                &:after{
                    transform: scale(0);
                }
            }
            
            &:focus + .label{
                
            }
            
            &:checked + .label{
                color: $de;
            }
        }
    }
}

[data-field="file"]{
    &, & > label, & > label *{cursor: pointer;}
}

[data-field="select"]{
    &, & > label, & > label *{cursor: pointer;}
    
    @at-root{
        .select{
            position: absolute; z-index: 30;
            
            padding-top: 10px; padding-bottom: 15px;
            
            font-size: 15px;
            @include rwd('xl'){font-size: 14px;}
            @include rwd('md'){font-size: 13px; padding-top: 5px; padding-bottom: 10px;}
            
            transition: opacity 120ms ease-in-out, padding-top 120ms ease-in-out;
            
            &.sel-hidden{
                opacity: 0; pointer-events: none;
                padding-top: 5px;
                
                &:not([style*="left"]){
                    height: 0; overflow: hidden;
                    padding: 0;
                }
            }
            
            .sel-instance{
                display: flex;
                flex-wrap: wrap;
                gap: 10px 5px;
                
                padding: 10px;
                
                border-radius: $radius;
                background-color: $wh;
                box-shadow: $shadow-hover;
                
                overflow: hidden;
            }
            
            .sel-search{
                display: block;
                
                flex: 1; min-width: 40%;
                
                background: $grl;
                border-radius: calc($radius * .75);
                overflow: hidden;
                
                i{
                    position: absolute; z-index: 6;
                    left: .7em; top: 50%;
                    transform: translateY(-50%);
                    
                    pointer-events: none;
                }
                
                input{
                    width: 100%; height: 2.4em;
                    padding-left: 2.4em;
                }
            }
            
            .sel-actions, .sel-check{
                display: flex;                
                flex: none;
                
                button{
                    display: flex;
                    justify-content: center; align-items: center;
                    
                    width: 2em; height: 2.4em;
                    
                    background: $grl; color: $del;
                    
                    &:first-child{
                        border-radius: calc(var(--radius) * 0.75) 0 0 calc(var(--radius) * 0.75);
                    }
                    &:nth-child(n+2){
                        &:before{
                            content: "";
                            
                            position: absolute;
                            top: .7em; bottom: .7em;
                            left: 0;
                            
                            width: 1px;
                            border-left: 1px solid $grd;
                        }
                    }
                    &:last-child{
                        border-radius: 0 calc(var(--radius) * 0.75) calc(var(--radius) * 0.75) 0;
                    }
                    
                    &:hover{
                        color: $de;
                    }
                }
            }
            
            .sel-options{
                display: flex; flex-direction: column;
                
                width: calc(100% + 10px);
                
                max-height: 240px;
                overflow: auto; -webkit-overflow-scrolling: touch;
                padding-right: 10px; margin-right: -10px;
                
                div{
                    display: flex; flex-direction: column;
                    flex: none;
                    
                    padding-left: 11px;
                    
                    & > span{
                        position: static;
                        
                        display: flex;
                        justify-content: flex-start; align-items: center;
                        
                        font-size: .9em;
                        color: $del;
                        
                        margin-bottom: 2px;
                        margin-left: -8px;
                        
                        cursor: pointer;
                        
                        &:before{
                            content: "";
                            
                            display: block;
                            width: 1px;
                            
                            position: absolute;
                            top: calc(1.5em + 4px); bottom: 4px; left: 7px;
                            
                            background: currentColor;
                            pointer-events: none;
                            
                            opacity: .6;
                        }
                        
                        &:hover{
                            color: $de;
                            
                            &:before{
                                opacity: 1;
                            }
                        }
                        
                        i{
                            margin-left: .5em;
                        }
                        
                        
                        &.close{
                            &:before{
                                display: none;
                            }
                            
                            & ~ button{
                                display: none;
                            }
                        }
                    }
                    
                    &:nth-child(n+2){
                        margin-top: 4px;
                    }
                    
                    &.hide{
                        opacity: .5;
                        
                        button{
                            opacity: 1 !important;
                        }
                    }
                }
                
                button{
                    display: flex;
                    flex: none;
                    
                    width: 100%; min-height: 2.4em;
                    padding-left: 2.4em;
                    
                    padding-top: .45em;
                    padding-bottom: .45em;
                    padding-right: .7em;
                    
                    border-radius: calc($radius * .75);
                    
                    transition: all 180ms ease-in-out;
                    
                    &:before, &:after{
                        content: "";
                        
                        position: absolute;
                        left: .7em; top: .7em;
                        
                        display: block;
                        width: 1em; height: 1em;
                        flex: none;
                        
                        border: 1px solid currentColor;
                        border-radius: 50%;
                    }
                    &:after{
                        background: currentColor;
                        transform: scale(.7);
                        
                        transition: transform 180ms ease-in-out;
                    }
                    
                    &.hover, &:focus{
                        background: $grl;
                    }
                    
                    &:not(.active){
                        // color: $del;
                        
                        &:after{
                            transform: scale(0);
                        }
                    }
                    
                    &.hide{
                        opacity: .2;
                        order: 2;
                        
                        &:hover{
                            opacity: .6;
                        }
                    }
                }
            }
            
            
            &[data-select-multiple="true"]{
                .sel-options{
                    button{
                        &:before{
                            border-radius: 4px;
                        }
                        
                        &:after{
                            border-radius: 3px;
                        }
                    }
                }
            }
        }
    }
}

[data-field="date"]{
    &, & > label, & > label *{cursor: pointer;}
    
    & + .pickmeup{
        border-radius: $radius;
        background-color: $wh;
        box-shadow: $shadow;
    }
    
    @at-root{
        .pickmeup{
            display: flex;
            gap: 10px;
            
            font-size: 15px;
            @include rwd('xl'){font-size: 14px;}
            @include rwd('md'){font-size: 13px;}
            
            &:not(.pmu-flat){
                position: absolute; z-index: 30;
                
                display: flex;
                padding-top: 10px; padding-bottom: 15px;
                @include rwd('md'){padding-top: 5px; padding-bottom: 10px;}
                
                transition: opacity 120ms ease-in-out, padding-top 120ms ease-in-out;
                
                &.pmu-hidden{
                    opacity: 0; pointer-events: none;
                    padding-top: 5px;
                    
                    &:not([style*="left"]){
                        height: 0; overflow: hidden;
                        padding: 0;
                    }
                }
            }
            &.pmu-flat{
                width: 100%;
                
                .pmu-instance{
                    &:nth-child(n+2){
                        &:before{
                            content: "";
                            
                            position: absolute;
                            top: 0; bottom: 10px; left: -6px;
                            
                            display: block;
                            width: 1px;
                            
                            background: $grl;
                        }
                    }
                }
            }
            
            &:not(.pmu-view-days) .pmu-days, &:not(.pmu-view-days) .pmu-day-of-week,
            &:not(.pmu-view-months) .pmu-months,
            &:not(.pmu-view-years) .pmu-years {
                display : none;
            }
            
            &:not(.pmu-flat) .pmu-instance{
                width: 100%;
                
                border-radius: $radius;
                background-color: $wh;
                box-shadow: $shadow-hover;
                
                nav{
                    &:before{display: none;}
                }
            }
            
            .pmu-instance{
                display: flex; flex-direction: column;
                
                width: 100%;
                padding: 6px; padding-top: 0;
                
                & > *{
                    display: flex; flex-wrap: wrap;
                }
                
                nav{
                    & > *{
                        display: flex;
                        justify-content: center; align-items: center;
                    }
                    
                    &:before, &:after{
                        content: "";
                        
                        position: absolute;
                        left: 0px; right: 0px;
                        
                        display: block;
                        height: 1px;
                        
                        background: $grl;
                    }
                    
                    padding-top:     6px; &:before{top:    0px;}
                    padding-bottom: 11px; &:after {bottom: 5px;}
                    
                    & + nav{
                        padding-top: 0; &:before{display: none;}
                    }
                }
            }
            
            .pmu-day-of-week{
                *{
                    cursor: default;
                }
            }
            
            nav:not(.pmu-day-of-week),
            .pmu-day-of-week,
            .pmu-days{
                display: grid;
                grid-template-columns: repeat(7, 1fr);
                gap: 5px;
            }
            
            .pmu-months,
            .pmu-years{
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 5px;
            }
            
            .pmu-day-of-week{& > *{aspect-ratio: 4/3;}}
            .pmu-days       {& > *{
                aspect-ratio: auto 1/1;
            }}
            .pmu-months     {& > *{aspect-ratio: 3/2;}}
            .pmu-years      {& > *{aspect-ratio: 3/2;}}
            
            .pmu-month{grid-column: span 5;}
            
            .pmu-button{
                display: flex;
                justify-content: center; align-items: center;
                
                cursor: pointer;
                
                &, &:before{transition: all 120ms ease-in-out;}
                
                &:before{
                    content: "";
                    
                    position: absolute; z-index: -1;
                    top: 0; right: 0; bottom: 0; left: 0;
                    
                    display: block;
                    
                    background-color: $grl;
                    border-radius: calc($radius / 1.5);
                    
                    transform: scale(.8); opacity: 0;
                }
                
                &.pmu-disabled{
                    color: $del;
                    cursor: not-allowed;
                }
                
                
                &.pmu-today{
                    color: $de;
                    font-weight: $bd;
                }
                
                &.pmu-selected{
                    color: $wh;
                    
                    &:before{
                        background-color: $de;
                        transform: scale(1); opacity: 1;
                    }
                }
                
                
                &:not(.pmu-selected):not(.pmu-disabled):hover{
                    &:before{
                        transform: scale(1); opacity: 1;
                    }
                }
            }
            
            .pmu-prev,
            .pmu-next{
                aspect-ratio: 1;
                color: $del;
                
                transition: all 120ms ease-in-out;
                
                &:hover{
                    color: $de;
                }
            }
            
            .pmu-month{
                flex: 1;
                text-align: center;
            }
            
            .pmu-not-in-month{
                opacity: .7;
            }
        }
    }
}

.field{
    &-logs{
        position: absolute;
        top: -4px; right: -4px;
        
        display: flex;
        gap: 4px;    
        
        .btn{
            .icn{
                transition: all 180ms ease-in-out;
            }
            
            &:not(:hover){
                .icn{
                    margin-left: 0;
                    opacity: 0;
                    width: 0;
                }
            }
            
            &:hover{
                .icn{
                    width: 1em;
                    margin-left: .5em;
                }
                
                &, &:focus{
                    transform: none;
                }
                
                &:active{
                    transform: translateY(1px);
                }
            }
        }
        
        & ~ .field-btns{
            margin-top: 7px;
        }
    }
    
    
    &-btns{
        position: absolute;
        right: var(--field-padding); top: calc(var(--field-height) / 2);
        transform: translate(0%, -50%);
        
        display: flex;
        gap: 5px;
        
        pointer-events: none;
        & > *{pointer-events: all;}
    }
    
    
    &-increment{
        
    }
    &-decrement{
        
    }
    
    &-reveal{
        
    }
    
    &-clear{
        
    }
    
    &-open{
        @at-root [data-field].open .field-open{
            .icn{
                i{
                    &:nth-last-child(2){opacity: 0;}
                    &:nth-child(2){opacity: 1;}
                }
            }
        }
    }
    
    &-more{
        margin: 0 var(--field-padding);
        padding: calc(var(--field-padding) / 3 * 2) 0;
        
        border-top: 1px solid $grl;
        
        &.abs{
            position: absolute;
            top: 100%; right: 0; left: 0;
            
            margin: 5px 0 0;
            padding: calc(var(--field-padding) / 3 * 2) var(--field-padding);
            
            border-radius: $radius; border: none;
            background-color: $wh;
            box-shadow: $shadow;
            
            transition: all 180ms ease-in-out;
        }
        
        
        @at-root [data-field]:not(.field-more-open){
            .field-more{
                position: absolute;
                opacity: 0; pointer-events: none;
                
                &.abs{
                    margin-top: 0;
                }
            }
        }
    }
}






// This code is for the demo, you can ignore it
// --------------------------------------------
html.pen-demo-field{
    [class*="fields-"]{
        display: flex; flex-wrap: wrap;
        gap: 10px;

        &:nth-child(n+2){
            margin-top: 40px;
        }
    }

    .fields-text{
        & > *{
            width: 100%;
        }
    }

    .fields-select{
        & > *{

        }
    }
}
              
            
!

JS

              
                const field = {
    'parser' : '|||',
    
    
    'textarea' : function($textarea){
        var textarea = $textarea[0];
        
        $textarea.removeClass('height');
        textarea.style.height = '1px';
        
        var textarea_new_height = parseInt($textarea.css('min-height').replace('px',''));
        
        if(textarea.scrollHeight > textarea_new_height){
            $textarea.addClass('height');
            textarea_new_height = textarea.scrollHeight;
        }
        
        textarea.style.height = textarea_new_height+"px";
    },
    
    
    'value'  : function($field){
        var type = $field.attr('data-field');
        
        var $input = $field.find('[name]');
        var $label = $field.find('.label');
        
        switch(type){
            case 'text'   : 
            case 'date'   : 
            case 'select' : 
            case 'file'   : {
                if($input != undefined){
                    var val = $input.val();
                    
                    if(type == 'file'){
                        val = [];
                        var files = $input[0].files;
                        for (var i = 0; i < files.length; i++){
                            val.push(files[i].name);
                        }
                    }
                    
                    if(Array.isArray(val) && val[0] == ''){
                        val = '';
                    }
                    
                    if($input[0].localName == 'textarea'){
                        field.textarea($input);
                    }
                    
                    if(val.length > 0){
                        $field.addClass('fill');
                        
                        if(type !== 'select'){
                            $input.attr('value', val);
                        }
                        
                        if(type !== 'date'){
                            if(Array.isArray(val)){
                                var separator = [', '];
                                var separator_last = separator;
                                
                                if($field.find('.input').attr('data-separator') !== undefined){
                                    separator = $field.find('.input').attr('data-separator').split(field.parser);
                                }
                                
                                if(separator.length > 1){
                                    separator_last = separator[1];
                                }
                                
                                separator = separator[0];
                                
                                if(type == 'select'){
                                    val = val.map(function(x){
                                        if($input.find('option[value="'+x+'"]').length){
                                            return $input.find('option[value="'+x+'"]').html();
                                        }
                                        else{
                                            return x;
                                        }
                                    });
                                }
                                
                                var new_val = '';
                                for (var i = 0; i < val.length; i++){
                                    if(i > 0 && i < val.length){
                                        if(i < val.length - 1){
                                            new_val += separator;
                                        }
                                        else{
                                            new_val += separator_last;
                                        }
                                    }
                                    
                                    new_val += val[i];
                                }
                                
                                val = new_val;
                            }
                            else{
                                if(type == 'select'){
                                    if($input.find('option[value="'+val+'"]').length){
                                        val = $input.find('option[value="'+val+'"]').html();
                                    }
                                }
                            }
                            
                            $field.find('.input').html(val);
                        }
                    }
                    else{
                        $field.removeClass('fill');
                        $input.removeAttr('value');
                        
                        if(type !== 'date'){
                            $field.find('.input').html('');
                        }
                    }
                    
                    if(!isNaN(parseInt($input.attr('maxlength'))) || (type == 'select' && $input.attr('data-limit') != undefined)){
                        var inputlength = val.length;
                        var maxlength   = parseInt($input.attr('maxlength'));
                        
                        if(type == 'select'){
                            inputlength = $input.val().length;
                            maxlength = $input.attr('data-limit');
                            
                            if(inputlength == 1 && $input.val()[0] == ''){
                                inputlength = 0;
                            }
                        }
                        
                        if(!$label.find('.maxlength').length){
                            $label.append('<span class="maxlength" data-maxlength="'+inputlength+'"><span>'+inputlength+'</span><span>'+maxlength+'</span></span>');
                        }
                        else{
                            $label.find('.maxlength').attr('data-maxlength', inputlength);
                            $label.find('.maxlength span:first-child').html(inputlength);
                            $label.find('.maxlength span:last-child').html(maxlength);
                        }
                    }
                }
                
                break;
            }
        }
    },
    
    'validate' : function($field){
        var $input = $field.find('[name]');
        
        if($input != undefined){
            var val = $input.val();
            
            // REQUIRED
            if($input.attr('required') != undefined){
                $field.find('[data-field-log="field-required"]').click();
                
                if(val.length == 0){
                    field.log($field, 'le', 'Ce champ est requis', 'field-required');
                }
            }
            
            // VALIDATION
            switch($input.attr('type')){
                case 'number' : {
                    if($input.attr('min') !== undefined){
                        var val_min = parseInt($input.attr('min'));
                        
                        if(val < val_min){
                            val = val_min;
                            $(this).val(val).change();
                        }
                    }
                    
                    if($input.attr('max') !== undefined){
                        var val_max = parseInt($input.attr('max'));
                        
                        if(val > val_max){
                            val = val_max;
                            $input.val(val).change();
                        }
                    }
                    
                    break;
                }
                
                case 'email' : {
                    if($field.find('[data-field-log*="email-"]').length){
                        $field.find('[data-field-log*="email-"]').click();
                    }
                    
                    if(val.length > 0){
                        if(!(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/).test(val)){
                            field.log($field, 'le', 'Email invalide', 'email-invalide');
                        }
                        else{
                            field.log($field, 'ls', 'Email valide', 'email-valide');
                        }
                    }
                    
                    break;
                }
            }
        }
    },
    
    
    'number' : {
        'increment' : function($number){
            var min  = $number.attr('min') != undefined ? parseInt($number.attr('min')) : 0;
            var max  = $number.attr('max') != undefined ? parseInt($number.attr('max')) : null;
            
            var step = $number.attr('step') != undefined ? parseInt($number.attr('step')) : 1;
            
            var value = min;    
            if($number.val() != '' && !isNaN(parseInt($number.val()))){
                value = parseInt($number.val());
                
                value = value + step;
                
                value = Math.max(value, min);
                value = Math.min(value, max);
            }
            
            $number.val(value).change();
        },
        
        'decrement' : function($number){
            var min  = $number.attr('min') != undefined ? parseInt($number.attr('min')) : 0;
            var max  = $number.attr('max') != undefined ? parseInt($number.attr('max')) : null;
            
            var step = $number.attr('step') != undefined ? parseInt($number.attr('step')) : 1;
            
            var value = min;    
            if($number.val() != '' && !isNaN(parseInt($number.val()))){
                value = parseInt($number.val());
                
                value = value - step;
                
                value = Math.max(value, min);
                value = Math.min(value, max);
            }
            
            $number.val(value).change();
        }
    },
    
    'date' : {
        'pick' : 0,
        
        'init' : function($field){
            var $input  = $field.find('[name]');
            var $label  = $field.find('.label');
            var $finput = null;
            
            var $pick = $input;
            
            if($field.find('.input').length){
                $finput = $field.find('.input');
            }
            
            var pickmeup_settings = {
                'date' : '',
                'default_date' : false,
                
                'hide_on_select' : true,
                
                'format' : 'Y-m-d',
                'first_day' : 1,
                
                'prev' : '<i class="fa-angle-left"></i>',
                'next' : '<i class="fa-angle-right"></i>',
                
                'mode' : 'single',
                
                'calendars' : 1,
                
                'separator' : field.parser,
                'title_format' : 'B Y',
                
                'class_name' : '',
                
                'locale'  : 'en',
                'locales' : {
                    en : {
                    	days        : ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
                    	daysShort   : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
                    	daysMin     : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                    	months      : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                    	monthsShort : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                    },
                    fr : {
                        days        : ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
                        daysShort   : ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
                        daysMin     : ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
                        months      : ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
                        monthsShort : ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Jui', 'Jul', 'Auo', 'Sep', 'Oct', 'Nov', 'Dec']
                    }
                }
            };
            
            // Date par défaut
            if($input.val().length > 0){
                pickmeup_settings.date = $input.val();
            }
            
            // Mode & Limit
            var mode  = 'single', limit = null;
            if($field.attr('data-date-mode') !== undefined){
                mode = $field.attr('data-date-mode').split(field.parser);
                
                if(mode.length > 1){
                    if(!isNaN(parseInt(mode[1]))){
                        limit = mode[1];
                    }
                }
                
                mode = mode[0];
            }
            
            switch(mode){
                case 'single' : {
                    pickmeup_settings.mode = 'single';
                    
                    break;
                }
                
                case 'multiple' : {
                    pickmeup_settings.mode = 'multiple';
                    pickmeup_settings.hide_on_select = false;
                    
                    if(limit !== null){
                        var dates_limit = 0;
                        if($input.val().length > 0){
                            dates_limit = $input.val().split(pickmeup_settings.separator).length;
                        }
                        
                        var dates_limit_maxlength  = '<span class="maxlength" data-maxlength="'+dates_limit+'">';
                            dates_limit_maxlength += '    <span>'+dates_limit+'</span>';
                            dates_limit_maxlength += '    <span>'+limit+'</span>';
                            dates_limit_maxlength += '</span>';
                        
                        $label.append(dates_limit_maxlength);
                    }
                    
                    break;
                }
                
                case 'range' : {
                    pickmeup_settings.mode = 'range';
                    
                    break;
                }
            }
            
            
            // Min - Max
            if($field.attr('data-date-minmax') !== undefined){
                var date_limit = $field.attr('data-date-minmax').split('/');
                
                if(date_limit[0].length > 0){
                    var date_min;
                    if(date_limit[0].length == 10 && (date_limit[0].match(/-/g) || []).length == 2){
                        date_min = new Date(date_limit[0]);
                    }
                    else{
                        date_min = (new Date()).changeDate(date_limit[0]);
                    }
                    
                    pickmeup_settings.min = date_min;
                }
                
                if(date_limit.length > 1){
                    if(date_limit[1].length > 0){
                        var date_max;
                        if(date_limit[1].length == 10 && (date_limit[1].match(/-/g) || []).length == 2){
                            date_max = new Date(date_limit[1]);
                        }
                        else{
                            date_max = (new Date()).changeDate(date_limit[1]);
                        }
                        pickmeup_settings.max = date_max;
                    }
                }
            }
            
            
            // Disabled            
            if($field.attr('data-date-disabled') !== undefined){
                var date_disabled = $field.attr('data-date-disabled').split('/');
                
                pickmeup_settings.render = function(date){
                    if($.inArray(date.format('dd-mm-yyyy'), date_disabled) > -1 || $.inArray(date.format('yyyy-mm-dd'), date_disabled) > -1 || $.inArray(date.format('dd-mm'), date_disabled) > -1){
                        return {disabled : true};
                    }
                    
                    if($.inArray(date.getDay().toString(), date_disabled) > -1){
                        return {disabled : true};
                    }
                    
                    
                    if($.inArray('holiday', date_disabled) > -1){                            
                        if($.inArray(date.format('dd/mm'), ['01/01','21/04','22/04','01/05','08/05','30/05','09/06','14/07','15/08','01/11','11/11','25/12']) > -1){
                            return {disabled : true};
                        }
                    }
                    
                    
                    return {};
                };
            }
            
            
            // Flat
            if($field.attr('data-date-flat') !== undefined){
                pickmeup_settings.flat = true;
                $pick = $field;
            }
            
            
            // Calendar
            var calendars = Math.floor($field.width() / 280);
            if(280 * calendars + 10 * (calendars - 1) > $field.width()){
                calendars = calendars - 1;
            }
            if(calendars < 1){calendars = 1;}
            pickmeup_settings.calendars = calendars;
            
            // Class
            // $field.attr('data-pmu', field.date.pick);
            // pickmeup_settings.class_name += 'pmu-'+field.date.pick;
            
            field.date.pick++;
            
            // Launch
            pickmeup($pick[0], pickmeup_settings);
            
            
            // Events
            $pick[0].addEventListener('pickmeup-change', function(e){
                var dates_format_input = [], dates_format_finput = [];
                
                var dates = e.detail.date;
                if(!Array.isArray(dates)){dates = [dates];}
                
                var dates_formatted = e.detail.formatted_date;
                if(!Array.isArray(dates_formatted)){dates_formatted = [dates_formatted];}
                
                if(pickmeup_settings.mode == 'multiple' && limit !== null){
                    if(dates.length > limit){
                        var dates_update = [], dates_formatted_update = [];
                        var date_to_unselect = dates.length - limit;
                        
                        for(var i = 0; i < dates.length; i++){
                            // Deselection du premier
                            // if(i >= date_to_unselect){
                            //     dates_update.push(dates[i]);
                            //     dates_formatted_update.push(dates_formatted[i]);
                            // }
                            
                            // Reselection du dernier
                            if(i < limit - 1 || i == dates.length - 1){
                                dates_update.push(dates[i]);
                                dates_formatted_update.push(dates_formatted[i]);
                            }
                        }
                        
                        dates = dates_update;
                        dates_formatted = dates_formatted_update;
                        
                        pickmeup($pick[0]).clear();
                        pickmeup($pick[0]).set_date(dates_update);
                    }
                    
                    
                    $field.find('.label .maxlength').attr('data-maxlength', dates.length);
                    $field.find('.label .maxlength span:first-child').html(dates.length);
                }
                
                
                for (var i = 0; i < dates.length; i++) {
                    dates_format_input.push(dates_formatted[i]);
                    
                    if($finput !== null && $finput.attr('data-date-format') !== undefined){
                        dates_format_finput.push(dates[i].format($finput.attr('data-date-format')));
                    }
                    else{
                        dates_format_finput.push(dates_formatted[i]);
                    }
                }
                
                dates_format_input = dates_format_input.join(pickmeup_settings.separator);
                
                if($finput !== null && $finput.attr('data-separator') !== undefined){
                    dates_format_finput = dates_format_finput.join($finput.attr('data-separator'));
                }
                else{
                    dates_format_finput = dates_format_finput.join(pickmeup_settings.separator);
                }
                
                $input.val(dates_format_input);
                
                if($finput !== null){
                    $finput.html(dates_format_finput);
                }
                
                
                $input.change();
            });
            
            $pick[0].addEventListener('pickmeup-show', function(e){
                $field.addClass('focus');
            });
            
            /* $pick[0].addEventListener('pickmeup-fill', function(e){
                console.log
            }); */
            
            $pick[0].addEventListener('pickmeup-hide', function(){
                $field.removeClass('focus');
            });
            
            
            // Finalisation    
            $pick.addClass('pmu-pick');
            var $pickmeup = $($pick[0].__pickmeup.element);
            
            if(!pickmeup_settings.flat){
                $pickmeup.width($field.width());
            }
            
            if($input.val().length < 1){
                pickmeup($pick[0]).clear();
                $pickmeup.find('.pmu-selected').removeClass('pmu-selected');
            }
        }
    },
    
    'select' : {
        'id' : 0,
        
        'position' : function($field){
            var $select = $('.select[data-select-id="'+$field.attr('data-select-id')+'"]');
            
            var select_style = {
                'width' : ($field.width())+'px',
                'left' : ($field.offset().left)+'px',
                'top' : ($field.offset().top + $field.height())+'px',
            };
            
            $select.css(select_style);
        },
        
        'close' : function($field){
            var $select = $('.select[data-select-id="'+$field.attr('data-select-id')+'"]');
            
            $select.find('.sel-options button').removeClass('hover');
            
            $field.removeClass('open force');
            $select.addClass('sel-hidden');
        },
        
        'open' : function($field){
            $('[data-field="select"]').each(function(){
                field.select.close($(this));
            });
            
            var $select = $('.select[data-select-id="'+$field.attr('data-select-id')+'"]');
            
            field.select.position($field);
            
            $field.addClass('open force');
            $select.removeClass('sel-hidden');
            
            if(!environment.mobile){
                $select.find('.sel-search input').focus();
            }
        },
        
        'init' : function($field){
            var $input = $field.find('[name]'), select = '';
            var $label = $field.find('.label');
            
            var required = ($input.attr('required') != undefined);
            var multiple = ($input.attr('multiple') != undefined);
            var limit    = ($input.attr('data-limit') != undefined) ? $input.attr('data-limit') : null;
            
            var select_attributes  = '';
                select_attributes += ' data-select-id="'+field.select.id+'"';
                select_attributes += ' data-select-required="'+required+'"';
                select_attributes += ' data-select-multiple="'+multiple+'"';
            
            var fold = false;
            
            var options = '', options_selected = [];
            $input.find('option').each(function(i){
                var $option = $(this); var option_html = $option.html(),
                                           option_val  = $option.val();
                                           
                $option.attr('data-index', i);
                if($option.attr('value') == undefined){
                    $option.attr('value', option_val);
                }
                
                // Ouverture groupe
                var label_group = '';
                if($option.closest('optgroup').length && !$option.prev('option').length){
                    fold = true;
                    
                    
                    var label = '';
                    if($option.closest('optgroup').attr('label') !== undefined){
                        label_group = $option.closest('optgroup').attr('label');
                        label = '<span>'+label_group+' <i class="fa-angle-down"></i></span>';
                    }
                    
                    options += '<div>';
                    options +=   label;
                }
                
                if(option_val != ''){
                    var selected = '';
                    if($option.is(':selected')){
                        selected = ' class="active"';
                        options_selected.push(i);
                    }
                    
                    var keywords = option_val;
                    if(label_group.length > 0){
                        keywords = label_group+' '+keywords;
                    }
                    if(option_html !== option_val){
                        keywords += ' '+option_html;
                    }
                    if($(this).attr('data-keywords') !== undefined){
                        keywords += ' '+$(this).attr('data-keywords');
                    }
                    keywords = keywords.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
                    
                    options += '<button type="button" value="'+option_val+'" data-index="'+i+'"'+selected+' data-keywords="'+keywords+'" tabindex="-1">';
                    options +=   '<span>'+option_html+'</span>';
                    options += '</button>';
                }
                
                // Fermeture groupe
                if($option.closest('optgroup').length && !$option.next('option').length){
                    options += '</div>';
                }
            });
            
            if(limit != null){
                // $label.append('<span class="maxlength" data-maxlength="'+options_selected.length+'"><span>'+options_selected.length+'</span><span>'+limit+'</span></span>');
                
                if(options_selected.length > 0){
                    select_attributes += ' data-limit-order="'+options_selected.join(field.parser)+'"';
                }
            }
            
            
            select += '<div class="select sel-hidden"'+select_attributes+'>';
            select +=   '<div class="sel-instance">';
            select +=     '<div class="sel-search">';
            select +=       '<i class="fa-magnifying-glass"></i>';
            select +=       '<input type="search" placeholder="Search">';
            select +=     '</div>';
            
            if(fold){
                select +=     '<div class="sel-actions">';
                select +=       '<button type="button" class="sel-fold">';
                select +=           '<i class="fa-angle-up"></i>';
                select +=       '</button>';
                select +=       '<button type="button" class="sel-unfold">';
                select +=           '<i class="fa-angle-down"></i>';
                select +=       '</button>';
                select +=     '</div>';
            }
            
            if(multiple && limit == null){
                select +=     '<div class="sel-check">';
                select +=         '<button type="button" class="sel-none">';
                select +=             '<i class="fa-square-xmark"></i>';
                select +=         '</button>';
                select +=         '<button type="button" class="sel-all">';
                select +=             '<i class="fa-square-check"></i>';
                select +=         '</button>';
                select +=     '</div>';
            }
            
            select +=     '<div class="sel-options">'+options+'</div>';
            select +=   '</div>';
            select += '</div>';
            
            
            $field.attr('data-select-id', field.select.id);
            field.select.id++;
            
            $('body').append(select);
        },
        
        'value' : function($field){
            var $input  = $field.find('[name]');
            var $select = $('.select[data-select-id="'+$field.attr('data-select-id')+'"]');
            
            var selected = [];
            $select.find('.sel-options button').each(function(){
                if($(this).hasClass('active')){
                    selected.push($(this).val());
                }
            });
            
            $input.val('');
            if(selected.length > 0){
                $input.val(selected);
            }
            
            field.value($field);
        }
    },
    
    
    'init' : function(){
        $('[data-field]').each(function(){
            var $field = $(this);
            var $input = $field.find('[name]');
            var val = $input.val();
            
            field.value($field);
            if(val.length > 0){
                field.validate($field);
            }
            
            
            var type = $field.attr('data-field');
            
            if(field[type] != undefined){
                if(typeof(field[type].init) == 'function'){
                    field[type].init($field);
                }
            }
            
            $('.field-ctas button', this).attr('tabindex', '-1');
        });
    },
    
    
    'log' : function($field, theme, text, id){
        var id = (typeof id !== 'undefined') ? id : null;
        
        if(id == null){
            id = '';
        }
        else{
            id = ' data-field-log="'+id+'"';
        }
        
        var $log = '<button type="button" class="btn xs '+theme+'"'+id+' tabindex="-1"><span>'+text+'</span><span class="icn"><i class="fa-xmark"></i></span></button>';
        
        if(!$field.find('.field-logs').length){
            $field.find('.field-main').after('<div class="field-logs">'+$log+'</div>');
        }
        else{
            $field.find('.field-logs').append($log);
        }
    }
};

field.init();

$(window).resize(function(){
    // Update textarea height
    $('[data-field="text"] textarea[name]').each(function(){
        field.textarea($(this));
    });
        
    // Re-init datepicker
    $('[data-field="date"]').each(function(){
        var $field = $(this);
        var $label = $field.find('.label'); $label.find('.maxlength').remove();
        
        var $pick = $field;
        if(!$pick.hasClass('pmu-pick')){
            $pick = $field.find('.pmu-pick');
        }
        
        if($pick == undefined){
            $pick = $field.find('[name]');
        }
        else{
            pickmeup($pick[0]).destroy();
        }
        
        field.date.init($field);
    });
    
    // Re-position select
    $('[data-field="select"]').each(function(){
        var $field = $(this);
        
        field.select.position($field);
        
        setTimeout(function(){
            field.select.position($field);
        }, 200);
    });
});


// FOCUS
$('body').on('focus', '[data-field] [name]', function(){
    var $input = $(this);
    var $field = $input.closest('[data-field]');
    
    var type = $field.attr('data-field');
    
    if(['text','file','date','select'].indexOf(type) > -1){
        $(this).closest('[data-field]').addClass('focus');
    }
    else{
        $(this).closest('[data-field]').addClass('focus-only');
    }
    
    if(type == 'select'){
        
        if(!$field.hasClass('open')){
            field.select.open($field);
        }
        else{
            field.select.close($field);
            $input.focusout();
        }
    }
});
// FOCUSOUT
$('body').on('focusout', '[data-field] [name]', function(){
    var $input = $(this);
    var $field = $input.closest('[data-field]');
    
    var type = $field.attr('data-field');
    
    $(this).closest('[data-field]').removeClass('focus focus-only');
});
// "FOCUSOUT" -> Close select
$(document).bind('mouseup touchend', function(e){
    if(
        !$('[data-field="select"]').is(e.target) && $('[data-field="select"]').has(e.target).length === 0 &&
        !$('.select').is(e.target) && $('.select').has(e.target).length === 0
    ){
        $('[data-field="select"]').each(function(){
            var $field = $(this);
            field.select.close($field);
        });
    }
});
$('body').on('focus', 'input, select, button, a', function(){
    if(!$(this).closest('[data-field="select"]').length && !$(this).closest('.select').length){
        $('[data-field="select"]').each(function(){
            var $field = $(this);
            field.select.close($field);
        });
    }
});


// VALUE
$('body').on('input change', '[data-field] [name]', function(){
    var $field = $(this).closest('[data-field]');
    field.value($field);
});


// VALIDATE
$('body').on('change', '[data-field] [name]', function(){
    var $field = $(this).closest('[data-field]');
    field.validate($field);
});


// LOGS
$('body').on('click', '[data-field] .field-logs button', function(){
    if($(this).closest('.field-logs').children().length == 1){
        $(this).closest('.field-logs').remove();
    }
    else{
        $(this).remove();
    }
});


// BTNS
$('body').on('click', '[data-field] .field-increment', function(){
    var $field = $(this).closest('[data-field]');
    var $input = $field.find('[name]');
    
    field.number.increment($input);
});
$('body').on('click', '[data-field] .field-decrement', function(){
    var $field = $(this).closest('[data-field]');
    var $input = $field.find('[name]');
    
    field.number.decrement($input);
});

$('body').on('click', '[data-field] .field-reveal', function(){
    var $field = $(this).closest('[data-field]');
    var $input = $field.find('[name]');
    
    $(this).toggleClass('active');
    
    if($(this).hasClass('active')){
        $input.attr('type', 'text');
    }
    else{
        $input.attr('type', 'password');
    }
});

$('body').on('click', '[data-field] .field-clear', function(){
    var $field = $(this).closest('[data-field]');
    var $input = $field.find('[name]');
    
    var type   = $field.attr('data-field');
    
    $input.val('');
    
    $field.removeClass('fill');
    $input.removeAttr('value');
    
    if(type == 'select'){
        var $select = $('.select[data-select-id="'+$field.attr('data-select-id')+'"]');
        
        $select.find('.sel-options button.active').click();
    }
    
    field.value($(this));
    field.validate($(this));
});

$('body').on('click', '[data-field] .field-browse', function(){
    var $field = $(this).closest('[data-field]');
    var $input = $field.find('[name]');
    
    $input.click();
});

$('body').on('click', '[data-field] .field-open', function(){
    var $field = $(this).closest('[data-field]');
    var $input = $field.find('[name]');
    
    
    if(!$field.hasClass('open')){
        field.select.open($field);
    }
    else{
        field.select.close($field);
    }
});

$('body').on('click', '[data-field] .field-toggle', function(){
    var $field = $(this).closest('[data-field]');
    var $input = $field.find('[name]');
    
    $field.toggleClass('field-more-open');
    $(this).toggleClass('active');
});


// SELECT
$('body').on('input change', '.select .sel-search input', function(){
    var $select = $(this).closest('.select');
    var $field = $('[data-field="select"][data-select-id="'+$select.attr('data-select-id')+'"]');
    var $input = $field.find('[name]');
    
    var search = $(this).val().toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
    
    
    if(search.length < 1){
        $select.find('button').removeClass('hide');
    }
    else{
        $select.find('.sel-options button').each(function(i){
            var keywords = $(this).attr('data-keywords');
            
            if(keywords.indexOf(search) > -1){
                $(this).removeClass('hide');
            }
            else{
                $(this).addClass('hide');
            }
        });
        
        // $select.find('.sel-options button[data-keywords*="'+search+'"]').removeClass('hide');
        // $select.find('.sel-options button:not([data-keywords*="'+search+'"])').addClass('hide');
    }
    
    
    if($select.find('.sel-options div').length){
        $select.find('.sel-options div').each(function(){
            if($('button', this).length == $('button.hide', this).length){
                $(this).addClass('hide');
                $('span', this).addClass('close');
            }
            else{
                $(this).removeClass('hide');
                $('span', this).removeClass('close');
            }
        });
    }
});

$('body').on('mouseenter mousemove', '.select .sel-options button', function(){
    var $select = $(this).closest('.select');
    $select.find('.sel-options button').blur();
    
    $(this).addClass('hover');
});
$('body').on('mouseleave', '.select .sel-options button', function(){
    var $select = $(this).closest('.select');
    $select.find('.sel-options button').blur();
    
    $(this).removeClass('hover');
});

$('body').on('keydown', function(e){
    if($('body > .select:not(.sel-hidden)').length){
        var $select = $('body > .select:not(.sel-hidden)');
        var $field  = $('[data-field][data-select-id="'+$select.attr('data-select-id')+'"]');
            
        switch(e.which) {
            case 38 : {// console.log('UP');
                e.preventDefault();
                
                if($select.find('.sel-options button.hover').length){
                    $select.find('.sel-options button.hover').removeClass('hover').focus();
                }
                
                if(!$select.find('.sel-options button:focus').length){
                    $select.find('.sel-options button').last().focus();
                }
                else{
                    var focused  = parseInt($select.find('.sel-options button:focus').attr('data-index'));
                    var to_focus = focused - 1;
                    
                    if(to_focus <= 0){
                        to_focus = $select.find('.sel-options button').length;
                    }
                    
                    $select.find('.sel-options button[data-index="'+to_focus+'"]').focus();
                }
                
                break;
            }
            
            case 40 : {// console.log('DOWN');
                e.preventDefault();
                
                if($select.find('.sel-options button.hover').length){
                    $select.find('.sel-options button.hover').removeClass('hover').focus();
                }
                
                if(!$select.find('.sel-options button:focus').length){
                    $select.find('.sel-options button').first().focus();
                }
                else{
                    var focused  = parseInt($select.find('.sel-options button:focus').attr('data-index'));
                    var to_focus = focused + 1;
                    
                    if(to_focus > $select.find('.sel-options button').length){
                        to_focus = 1;
                    }
                    
                    $select.find('.sel-options button[data-index="'+to_focus+'"]').focus();
                }
                
                break;
            }
            
            case 13 : 
            case 32 : {// console.log('ENTER / SPACE');
                if(!$select.find('.sel-search input').is(':focus')){
                    e.preventDefault();
                    
                    if($select.find('.sel-options button.hover').length){
                        $select.find('.sel-options button.hover').click();
                    }
                    
                    if($select.find('.sel-options button:focus').length){
                        $select.find('.sel-options button:focus').click().focus();
                    }
                }
                
                break;
            }
            
            case 27 :
            case  8 : {// console.log('ESCAPE / BACKSPACE');
                if(!$select.find('.sel-search input').is(':focus')){
                    e.preventDefault();
                    
                    field.select.close($field);
                }
                
                break;
            }
        }
    }
});

$('body').on('click', '.select .sel-options button', function(){
    var $select = $(this).closest('.select');
    var $field = $('[data-field="select"][data-select-id="'+$select.attr('data-select-id')+'"]');
    var $input = $field.find('[name]');
    
    var required = ($input.attr('required') != undefined),
        multiple = ($input.attr('multiple') != undefined);
    
    var limit = 1, limit_order = [];
    if(multiple){
        limit = null;
        
        if(!isNaN(parseInt($input.attr('data-limit')))){
            limit = parseInt($input.attr('data-limit'));
        }
    }
    
    var index = $(this).attr('data-index');
    
    if(!$(this).hasClass('active')){
        if(!multiple){
            $select.find('.sel-options button.active').removeClass('active');
        }
        
        $(this).addClass('active');
        
        
        if(limit !== null){
            if($select.attr('data-limit-order') == undefined){
                $select.attr('data-limit-order', index);
            }
            else{
                limit_order = $select.attr('data-limit-order').split(field.parser);
                
                if(limit_order.length == limit){
                    // Retire le premier selectionné
                    // $select.find('.sel-options button[data-index="'+(limit_order.shift())+'"]').removeClass('active');
                    
                    // Retire le dernier selectionné
                    $select.find('.sel-options button[data-index="'+(limit_order.pop())+'"]').removeClass('active');
                }
                
                limit_order.push(index);
                $select.attr('data-limit-order', limit_order.join(field.parser));
            }
        }
    }
    else{
        var limit_update = false;
        
        if(!required){
            $(this).removeClass('active');
            limit_update = true;
        }
        else{
            if($select.find('.sel-options button.active').length > 1){
                $(this).removeClass('active');
                limit_update = true;
            }
        }
        
        
        // LIMIT
        if(limit_update && $select.attr('data-limit-order') != undefined){
            limit_order = $select.attr('data-limit-order').split(field.parser);
            
            if(limit_order.indexOf(index) !== -1) {
                limit_order.splice(limit_order.indexOf(index), 1);
            }
            
            if(limit_order.length > 0){
                $select.attr('data-limit-order', limit_order.join(field.parser));
            }
            else{
                $select.removeAttr('data-limit-order');
            }
        }
    }
    
    field.select.value($field);
});

$('body').on('click', '.select .sel-options div > span', function(){
    $(this).toggleClass('close');
});

$('body').on('click', '.select .sel-actions button', function(){
    var $select = $(this).closest('.select');
    
    if($(this).hasClass('sel-fold')){
        $select.find('.sel-options div > span:not(.close)').click();
    }
    
    if($(this).hasClass('sel-unfold')){
        $select.find('.sel-options div > span.close').click();
    }
});

$('body').on('click', '.select .sel-check button', function(){
    var $select = $(this).closest('.select');
    
    if($(this).hasClass('sel-none')){
        $select.find('.sel-options > button.active').click();
    }
    
    if($(this).hasClass('sel-all')){
        $select.find('.sel-options > button:not(.active)').click();
    }
});
              
            
!
999px

Console