css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <form novalidate>
   <div class="form-inner">
     <h2>Text, Email, Number, Password</h2>
     <div>
        <div class="underline">
           <input type="text" tabindex="1" name="name" id="name"/>
           <label for="name">Name</label>
           <span class="placeholder">Name</span>
        </div>
     </div>
    <div>
        <div class="underline">
           <input type="email" name="email" data-validation="email"  data-error="Please enter a valid email address" tabindex="2" id="email" autocorrect="off" autocapitalize="off" spellcheck="false"/>
           <label for="email">Email</label>
           <span class="placeholder">Email</span>
        </div>
     </div>
     <div class="half">
        <div class="underline right-control prefixed">
           <input name="budget" type="number" step="100" min="0" data-validation="number" data-error="Has to be a number" tabindex="3" id="budget"/>
           <label for="budget">Budget</label>
           <span class="prefix">$</span>
           <span class="placeholder">Budget</span>
           <div class="spinner-arrow up"><div></div></div>
           <div class="spinner-arrow down"><div></div></div>
        </div>
     </div>
     <div class="half">
        <div class="underline">
           <input name="password" type="password" id="password" data-validation="password" data-error="No less than 6 characters" tabindex="4"/>
           <label for="password">Password</label>
           <span class="placeholder">Password</span>
        </div>
     </div>

    <h2>Checkbox</h2>
    <div class="half no-label">
      <div>
        <input type="checkbox" name="checkbox1" id="checkbox1" value="true" />
        <label for="checkbox1">Checkbox 1</label>
        <span class="checkbox" tabindex="5">
          <span></span>
        </span>
      </div>
    </div>

    <div class="half no-label">
      <div>
        <input type="checkbox" name="checkbox2" id="checkbox2" value="true"/>
        <label for="checkbox2">Checkbox 2</label>
        <span class="checkbox" tabindex="6">
          <span></span>
        </span>
      </div>
    </div>
     <div class="half no-label">
      <div>
        <input type="checkbox" name="checkbox3" id="checkbox3" value="true"/>
        <label for="checkbox3">Checkbox 3</label>
        <span class="checkbox" tabindex="7">
          <span></span>
        </span>
      </div>
    </div> 
    <div class="half no-label">
      <div>
        <input type="checkbox" name="checkbox4" id="checkbox4" value="true"/>
        <label for="checkbox4">Checkbox 4</label>
        <span class="checkbox" tabindex="8">
          <span></span>
        </span>
      </div>
    </div>
  <h2>Select (desktop)</h2>
    <div class="half dropdown">
      <div class="underline right-control">
        <input name="country" type="text" />
        <label>Continent</label>
        <span class="placeholder">Continent</span>
        <div class="dropdown-arrow"><div></div></div>
        <div class="dropdown-box">
          <input class="focus-helper" type="text"/>
          <div>
            <div><p>Africa</p></div>
            <div><p>North America</p></div>
            <div><p>South America</p></div>
            <div><p>Asia</p></div>
            <div><p>Europe</p></div>
            <div><p>Australia</p></div>
            <div><p>Antarctica</p></div>
          </div>
        </div>
      </div>
    </div>
     <h2>Select (mobile)</h2>
    <div class="half dropdown">
      <div class="underline right-control">
        <input name="country" type="text"/>
        <label>Continent</label>
        <span class="placeholder">Continent</span>
        <div class="dropdown-arrow"><div></div></div>
      </div>
      <select>
          <option value="Africa">Africa</option>
            <option value="North America">North America</option>
            <option value="South America">South America</option>
            <option value="Asia">Asia</option>
            <option value="Europe">Europe</option>
            <option value="Australia">Australia</option>
            <option value="Antarctica">Antarctica</option>
         </select>
    </div>
  <h2>Textarea</h2>
    <div>
      <div class="underline">
        <textarea id="comments" name="comments" rows="1" tabindex="9" required></textarea>
        <label for="comments">Comments</label>
        <span class="placeholder">Comments</span>
      </div>
    </div>
    <h2>Radio Button</h2>
    <div class="half no-label">
      <div>
        <input type="radio" name="gender" checked value="male" id="gender-male"/>
        <label for="gender-male">Male</label>
        <span class="radio" tabindex="11">
          <span></span>
        </span>
      </div>
    </div>
    <div class="half no-label">
      <div>
        <input type="radio" name="gender" value="female"  id="gender-female"/>
        <label for="gender-female">Female</label>
        <span class="radio" tabindex="12">
          <span></span>
        </span>
      </div>
    </div>
    <h2>Button</h2>
    <div class="buttons">
      <div><button type="button" name="clear" tabindex="13">Clear</button></div>
      <div><button type="submit" tabindex="14">Send</button></div>

    </div>
  </div>
</form>
            
          
!
            
              /* COLORS */
@positive: #019d59;
@negative: #d4412c;
@neutral: #1065e7;
@light-gray: #bbb;
@medium-gray: #777;
@dark-gray: #333;
@very-dark-gray: #111;
@white: #fff;

/**** FORM ****/

/* GENERAL */
@form-width: 100%;
@max-form-width: 600px;
@animation-time: 0.08s;
@animation-ease: ease-out;
@form-padding: 10px 5px 10px 5px;
@master-stroke: 2px;
@vertical-row-spacing: 0px;
@horizontal-field-margin: 10px;
@no-label-row-padding: 15px;
@font: "Roboto", sans-serif;

/* LABELS */
@label-font-size: 12px;
@label-font: @font;
@label-from-top: -14px;
@label-space: 26px;
@label-weight: bold;
@label-bottom-padding: 2px;
@inline-label-spacing: 20px;

/* HEADINGS */
@heading-font: "Roboto", sans-serif;
@heading-font-size: 28px;
@heading-color: @medium-gray;
@heading-weight: bold;
@heading-top-spacing: 50px;
@heading-bottom-spacing: 10px;

/* INPUTS */
@input-font-size: 18px;
@input-font-weight: bold;
@input-font-color: @very-dark-gray;

/* SELECT -- DROPDOWNS */
@dropdown-arrow-from-bottom: 6px;
@dropdown-right-wing-height: 35px;
@dropdown-left-wing-height: 45px;
@dropdown-box-stroke: @master-stroke;
@dropdown-box-from-top: 100%;
@dropdown-box-option-height: 30px;
@dropdown-box-max-height: @dropdown-box-option-height * 5;

/* PLACEHOLDERS */
@placeholder-color: @medium-gray;
@placeholder-weight: normal;

/* TEXTAREA */
@textarea-font-weight: normal;
@textarea-font-size: 18px;
@textarea-font-color: @dark-gray;
@textarea-stroke: @master-stroke;
@textarea-label-from-top: 0px;
@textarea-font-color: @very-dark-gray;
@textarea-placeholder-from-top: 10px;

/* BUTTONS */
@button-padding: 5px;
@button-font-size: 12px;
@button-stroke: @master-stroke;
@button-margin-top: 10px;
@button-width: 25%;

/* RADIO BUTTONS */
@radio-size: 32px; // % 4 == 0
@radio-stroke: @master-stroke;
@radio-inner-size: 0.5;

/* CHECKBOXES */
@checkbox-size: 32px;
@checkbox-stroke: 2px;
@checkbox-check-height: 0.5;
@checkbox-check-width: 0.25;
@checkbox-check-stroke: 2px;

/* UNDERLINE */
@underline-padding:  6px;
@underline-wing-height: 5px;
@underline-wing-displacement: 8px;
@underline-stroke: @master-stroke;
@underline-color: @light-gray;

/* SPINNER ARROWS */
@arrow-size: 7px;
@arrow-vertical-spacing: 12px;
@arrow-stroke: @master-stroke;
@arrow-padding: 12px;
@arrow-color: @light-gray;

/* FIELD CONTROLS */
@right-control-padding: 30px;
@left-control-padding: 15px;

//////////////////
body {
    background-color: @white;
    height: 100%;
}

form {
  padding: 40px 0 80px 0;
  
}
.form-inner {
    .clearfix;
    margin: auto;
    padding: @form-padding;
    width: @form-width;
    max-width: @max-form-width;
    box-sizing: border-box;
    > h2 {
        font-size: @heading-font-size;
        font-family: @heading-font;
        color: @heading-color;
        margin: 0;
        margin-top: @heading-top-spacing !important;
        margin-bottom: @heading-bottom-spacing !important;
        margin-left: @horizontal-field-margin;
        font-weight: @heading-weight;
        display: block;
        position: relative;
        float: left;
        width: 90%;
    }
    > div {
        padding-bottom: 0;
        padding-top: @vertical-row-spacing + @label-space;
        width: 100%;
        float: left;
        position: relative;
        &.half {
            width: 50%;
        }
        &.quarter {
            width: 25%;
        }
        @media all and (max-width:360px) {
            &.half {
                width: 100%;
            }
            &.quarter {
                width: 50%;
            }
        }
        &.align-right {
            float: right;
        }
        &.no-label {
            padding-top: @vertical-row-spacing + @no-label-row-padding;
        }
         > select {
            position: absolute;
            opacity: 0;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 500;
        }
        &.dropdown {
            cursor: pointer;
            input {
                cursor: pointer;
            }
            label {
                cursor: pointer !important;
            }
            .dropdown-arrow {
                bottom: @dropdown-arrow-from-bottom;
                padding: @arrow-padding;
                > div {
                    .unselectable;
                    border-top: @arrow-size solid @arrow-color;
                    border-left: @arrow-size solid transparent;
                    border-right: @arrow-size solid transparent;
                }
                &:active > div {
                    border-top: @arrow-size solid @neutral;
                }
            }
            &.open {
                .dropdown-arrow > div {
                    transform: rotate(180deg);
                }
                .underline {
                    &:before, &::before, &:after, &::after {
                        background-color: @neutral;
                        height: @dropdown-right-wing-height;
                    }
                    label {
                        color: @neutral !important;
                    }
                    &.float-label {
                        &:before, &::before {
                            height: @dropdown-left-wing-height;
                        }
                    }
                }
                .dropdown-box {
                    padding: @underline-wing-displacement;
                    padding-top: 0;
                    height: auto;
                    border: @dropdown-box-stroke solid @neutral;
                    border-top: none;
                }
            }
            .dropdown-box {
                background-color: #fff;
                border-bottom: 0px solid transparent;
                border-left: @dropdown-box-stroke solid @neutral;
                border-right: @dropdown-box-stroke solid @neutral;
                border-top: none;
                width: 100%;
                max-width: 100%;
                height: 0;
                top: @dropdown-box-from-top;
               // margin-top: @underline-stroke;
                box-sizing: border-box;
                overflow: hidden;
                z-index: 1000;
                position: absolute;
                left: 0;
                > .focus-helper {
                    position: absolute;
                    opacity: 0;
                    top: 0;
                    left: 0;
                    width: 0;
                    height: 0;
                    font-size: 0;
                    margin: 0;
                    padding: 0;
                    border: none;
                }
                > div {
                    max-height: @dropdown-box-max-height;
                    overflow: auto;
                    > div {
                        width: 100%;
                        height: @dropdown-box-option-height;
                        > p {
                            cursor: pointer;
                            display: block;
                            line-height: @dropdown-box-option-height;
                            font-family: @font;
                            font-size: @input-font-size;
                            color: @dark-gray;
                            font-weight: normal;
                        }
                    }
                }
            }
        }
        &.buttons {
            margin-top: @button-margin-top;
            > div {
                width: @button-width;
                padding: 0 @horizontal-field-margin;
                box-sizing: border-box;
                margin: 0;
                float: left;
                > button {
                    font-family: @font;
                    font-weight: bold;
                    border: none;
                    outline: none;
                    background-color: none;
                    background: none;
                    border: @button-stroke solid @medium-gray;
                    padding: @button-padding 0;
                    font-size: @button-font-size;
                    width: 100%;
                    cursor: pointer;
                    color: @very-dark-gray;
                    &:focus {
                        border-color: @neutral;
                        color: @dark-gray;
                    }
                    &:active {
                        background-color: @neutral;
                        color: @white !important;
                    }
                }
            }
        }
       
        > div {
            .unselectable;
            position: relative;
            margin: 0 @horizontal-field-margin;
            &.prefixed > input {
                padding-left: @left-control-padding;
            }
            &.right-control {
                padding-right: @right-control-padding !important;
            }
            &.underline {
                border-bottom: @underline-stroke solid @underline-color;
                padding: 0 @underline-wing-displacement @underline-padding @underline-wing-displacement;
                &:before, &::before, &:after, &::after {
                    content: "";
                    height: @underline-wing-height;
                    width: @underline-stroke;
                    position: absolute;
                    bottom: 0;
                    background-color: @underline-color;
                }
                &:before, &::before {
                    left: 0;
                }
                &:after, &::after {
                    right: 0;
                }
                &.dropdown-hint {
                    &:after, &::after {
                        @dropdown-hint-border-size: (@underline-wing-height * 2) / 2;
                        width: 0;
                        height: 0;
                        background-color: transparent;
                        border-right: @dropdown-hint-border-size solid @underline-color;
                        border-bottom: @dropdown-hint-border-size solid @underline-color;
                        border-left: @dropdown-hint-border-size solid transparent;
                        border-top: @dropdown-hint-border-size solid transparent;
                    }
                }
                &.focused {
                    border-color: @neutral;
                    &:before, &::before, &:after, &::after {
                        background-color: @neutral;
                    }
                }
            }
            &.float-label {
                > .placeholder {
                    opacity: 0 !important;
                }
                > label, .prefix {
                    opacity: 0.99 !important;
                }
            }
            
            > textarea {
                border: none;
                color: @textarea-font-color;
                width: 100%;
                resize: none;
                outline: none;
                padding: 0;
                margin: 0;
                -webkit-appearance: none;
                border-radius: 0;
                overflow: hidden;
                border-image-width: 0;
                font-family: @font;
                font-size: @textarea-font-size;
                font-weight: @textarea-font-weight;
                position: relative;
                z-index: 1;
                background-color: transparent;
                display: block;
                &:focus ~ label {
                    color: @neutral;
                }
                ~ label {
                  cursor: text;
                }
            }
            > input {
                position: relative;
                border: none;
                border-image-width: 0;
                outline: none;
                margin: 0;
                font-size: @input-font-size;
                padding: 0;
                z-index: 1;
                -webkit-appearance: none;
                border-radius: 0;
                background-color: transparent;
                width: 100%;
                display: block;
                box-sizing: border-box;
                color: @input-font-color;
                font-family: @font;
                font-weight: @input-font-weight;
                ~ label {
                  cursor: text;
                }
                &[type=checkbox], &[type=radio] {
                    display: none;
                    ~ label {
                        opacity: 1 !important;
                        cursor: pointer;
                        position: absolute;
                        font-size: @input-font-size;
                        font-weight: @placeholder-weight;
                        color: @placeholder-color;
                        font-family: @font;
                        top: 0px;
                        left: 0;
                        box-sizing: border-box;
                        width: auto;
                        padding-left: @checkbox-size + @inline-label-spacing;
                        line-height: @checkbox-size;
                    }
                    &:checked { 
                        ~ label {
                            color: @dark-gray;
                        }
                        ~ .checkbox {
                            border-color: @dark-gray;
                            > span {
                                border-color: @dark-gray;
                            }
                        }  
            
                        ~ .radio {
                            border-color: @dark-gray;
                            > span {
                                background-color: @dark-gray;
                            }
                        }  
            
                    }
                }
                &:focus ~ label {
                  color: @neutral;
                }
            }
            > label {
                width: 100%;
                padding-bottom: @label-bottom-padding;
                cursor: default;
                font-weight: @label-weight;
                position: absolute;
                font-size: @label-font-size;
                font-family: @label-font;
                top: @label-from-top;
                left: @underline-wing-displacement;
                opacity: 0;
                color: @medium-gray;
                &.invalid {
                    color: @negative;
                    opacity: 1;
                }
            }
            > .dropdown-arrow, .spinner-arrow {
                .unselectable;
                position: absolute;
                right: 0;
                z-index: 6;
                cursor: pointer;
            }
            > .spinner-arrow {
                padding: 0px @arrow-padding;
                &.up {
                    bottom: @arrow-padding + @arrow-vertical-spacing / 2 + @arrow-size;
                    padding-top: @arrow-padding;
                    padding-bottom: @arrow-vertical-spacing / 2;
                    > div {
                        border-bottom: @arrow-size solid @arrow-color;
                    }
                    &:active > div {
                        border-bottom: @arrow-size solid @neutral;
                    }
                }
                &.down {
                    padding-bottom: @arrow-padding;
                    padding-top: @arrow-vertical-spacing / 2;
                    bottom: 0;
                    > div {
                        border-top: @arrow-size solid @arrow-color;
                    }
                    &:active > div {
                        border-top: @arrow-size solid @neutral;
                    }
                }
                > div {
                    .unselectable;
                    border-left: @arrow-size solid transparent;
                    border-right: @arrow-size solid transparent;
                }
            }
            > span {
                &.placeholder {
                    .unselectable;
                    font-family: @font;
                    position: absolute;
                    left: @underline-wing-displacement;
                    bottom: @underline-padding + @underline-stroke / 2 + 1;
                    color: @placeholder-color;
                    font-family: @font;
                    font-weight: @placeholder-weight;
                    font-size: @input-font-size;
                    z-index: 0;
                    opacity: 0.99;
                }
                &.prefix {
                    font-size: @input-font-size;
                    font-family: @font;
                    position: absolute;
                    color: @medium-gray;
                    left: @underline-wing-displacement;
                    bottom: @underline-padding + @underline-stroke / 2 + 1;
                    opacity: 0;
                }
                &.checkbox {
                    width: @checkbox-size;
                    height: @checkbox-size;
                    border: @checkbox-stroke solid @light-gray;
                    display: block;
                    position: relative;
                    cursor: pointer;
                    outline: none;
                    .unselectable;
                    box-sizing: border-box;
                    > span {
                        border-right: @checkbox-check-stroke solid transparent;
                        border-bottom: @checkbox-check-stroke solid transparent;
                        @sin45: 0.70710678118;
                        @height: @checkbox-size * @checkbox-check-height;
                        @width: @checkbox-size * @checkbox-check-width;
                        @top-correction: (@width * @sin45) / 2 - @checkbox-check-stroke / 2;
                        transform: rotate(45deg);
                        width: @width - @checkbox-check-stroke;
                        height: @height - @checkbox-check-stroke;
                        position: relative;
                        display: block;
                        top: (@checkbox-size - @height) / 2 - @checkbox-stroke - @top-correction;
                        left: (@checkbox-size - @width) / 2 - @checkbox-stroke;
                    }
                }
                &.radio {
                    width: @radio-size;
                    height: @radio-size;
                    border: @radio-stroke solid @light-gray;
                    display: block;
                    position: relative;
                    cursor: pointer;
                    outline: none;
                    .unselectable;
                    border-radius: 50%;
                    box-sizing: border-box;
                    > span {
                        width: @radio-size * @radio-inner-size;
                        height: @radio-size * @radio-inner-size;
                        border-radius: 50%;
                        background-color: transparent;
                        position: relative;
                        display: block;
                        top: (1 - @radio-inner-size)/2 * @radio-size - @radio-stroke;
                        left: (1 - @radio-inner-size)/2 * @radio-size - @radio-stroke;
                    }
                    &.checked {
                        border-color: @dark-gray!important;
                        > span {
                            background-color: @dark-gray !important;
                        }
                    }
                }
            }
        }
    }
}
html.no-touch {
    form {
        *, :before, ::before, :after, ::after {
            .animate;
        }
        .checkbox:hover, .radio:hover {
            border-color: @medium-gray;
        }
        .checkbox:hover > span {
            border-color: @light-gray;
        }
        .checkbox {
            &:active, &:focus {
                border-color: @neutral !important;
            }
            &:focus ~ label {
              color: @neutral !important;
             }
        }
        .radio {
            &:active, &:focus {
                border-color: @neutral !important;
            }
        }
        .radio:hover > span {
            background-color: @light-gray;
        }
        .input-hover {
            border-color: @medium-gray;
            &:before, &::before, &:after, &::after {
                background-color: @medium-gray;
            }
            .spinner-arrow {
                &.up > div {
                    border-bottom: @arrow-size solid @medium-gray;
                }
                &.down > div {
                    border-top: @arrow-size solid @medium-gray;
                }
            }
            .dropdown-arrow > div {
                border-top: @arrow-size solid @medium-gray;
            }
        }
        .buttons > div > button {
            &:hover {
                border-color: @neutral;
                color: @dark-gray;
            }
        }
        .spinner-arrow:hover {
            &.up > div {
                border-bottom: @arrow-size solid @medium-gray;
            }
            &.down > div {
                border-top: @arrow-size solid @medium-gray;
            }
        }
        .dropdown-box p {
          &:hover {
              color: @neutral !important;
            }
        }
        .dropdown:hover {
            .dropdown-arrow > div {
                border-top: @arrow-size solid @medium-gray;
            }
        }
        input {
            &[type=checkbox], &[type=radio] {

                ~ label:hover ~ span {
                    
                    &.checkbox {
                        border-color: @medium-gray;
                        > span {
                            border-color: @light-gray;
                        }
                    }
        
                    &.radio {
                        border-color: @medium-gray;
                        > span {
                            background-color: @light-gray;
                        }
                    }
                }

                &:checked {
                    ~ label:hover ~ span { 
                        &.checkbox { 
                            border-color: @dark-gray; > span { 
                                border-color: @dark-gray;  
                            } 
                        }  
                        &.radio { 
                            border-color: @dark-gray; > span { 
                                background-color: @dark-gray; 
                            } 
                        }
                    }
                }
            }
        }
    }
}
.clearfix {
    zoom: 1;
    &:before, &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}
// makes text unselectable
.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
// this hides the form clear control on IE
::-ms-clear {
    display: none;
}
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
input::-moz-focus-inner {
    padding: 0 !important;
    border: 0 none !important;
}
.animate {
   transition: 
      opacity @animation-time @animation-ease,
     background @animation-time @animation-ease,
      color @animation-time @animation-ease,
      border @animation-time @animation-ease,
      max-height @animation-time @animation-ease,
    height @animation-time @animation-ease,
    //  transform @animation-time @animation-ease,
     width @animation-time @animation-ease;
}
            
          
!
            
              var space_key = typeof KeyEvent !== "undefined" ? KeyEvent.DOM_VK_SPACE : 32;
var enter_key = typeof KeyEvent !== "undefined" ? KeyEvent.DOM_VK_ENTER : 13;
var up_key =    typeof KeyEvent !== "undefined" ? KeyEvent.DOM_VK_UP    : 38;
var down_key =  typeof KeyEvent !== "undefined" ? KeyEvent.DOM_VK_DOWN  : 40;

function setup_compy_form(){
    var form = $("form");
    var inputs = form.find("input, textarea");
    var spans = form.find("span");
    var checkboxes = spans.filter(".checkbox");
    var radios = spans.filter(".radio");
    var radio_inputs = inputs.filter("[type=radio]");
    var checkbox_inputs = inputs.filter("[type=checkbox]");
    var spinner_arrows = form.find(".spinner-arrow");
    var underlines = form.find(".underline");
    var underline_inputs = underlines.children("input");
    var underline_labels = underlines.children("label");
    var textareas = inputs.filter("textarea");
    var dropdowns = form.find(".dropdown");
   // var dropdown_options = dropdowns.find("p");
    var labels = form.find("label"); 
    var dropdown_inputs = dropdowns.find("input");
    var selects = dropdowns.find("select");
  
    labels.mousedown(function(e){
      e.preventDefault();
    })
  
    selects.change(function(){
      var select = $(this);
      var container = select.siblings("div");               
      set_dropdown_value(container, select.val());
    });
  
    function set_dropdown_value(container, value){
        var input = container.children("input");
        var placeholder = container.children(".placeholder");

        container.addClass("float-label");

        input.val(value);
        placeholder.hide();
    }

    dropdown_inputs
      .filter(".focus-helper")
          .blur(function(){
              $(this).closest(".dropdown").removeClass("open");
          });
  
  
    dropdowns
       .click(function(e){
         var dropdown = $(this);
         var select = dropdown.find("select");
         
         if(select.size() > 0){
 
         } else {
             dropdown.toggleClass("open");
         
             if(dropdown.hasClass("open")){
                var label = dropdown.find("label");
             
                if(label.hasClass("invalid")){
                  label.text(label.data("text"));
                  label.removeClass("invalid");
                }
                dropdown.find(".focus-helper").focus();
               
             }
         }
       })
       .mousedown(function(e){
          if(!$(e.target).is("select")){
            e.preventDefault();
          }
       })
       .blur(function(){
         var dropdown = $(this);
         dropdown.removeClass("open");
       })
       .find(".dropdown-box p")
            .mousedown(function(e){
                e.preventDefault();
            })
            .click(function(e){
                var option = $(this);
                var dropdown_box = option.closest(".dropdown-box");
                dropdown_box.removeClass("open");
                set_dropdown_value(dropdown_box.parent(), option.text());
           });

  
  
    radio_inputs
       .filter("[checked]")
            .each(function(){
                 activate_radio_input($(this));
             });

    // load previous form data from local storage
    load_form_data();

    form.submit(function () {
      
        if (validate_all()) {
            var $this = $(this);
            var formData = $this.serialize();
            alert(formData);
            return false;
        } else {
            $('html,body').animate({
                scrollTop: $(".invalid").offset().top - 10
            }, 'fast');
            return false;
        }
    });
   
    textareas.each(function(){
      var textarea = $(this);
             
      textarea.on('input change cut paste drop keyup', function(){
        $(this)
          .height('auto')
          .height(this.scrollHeight);
      });
    });
  
    checkboxes
        .click(function () {
            var checkbox = $(this);
            toggle_checkbox_value(checkbox);
            checkbox.focus();
        })
        .keydown(function (e) {
            // check if space is defined
            var key = e.which;

            // space is pressed on focus
            if (key === space_key || key === enter_key) {
                e.preventDefault();
                toggle_checkbox_value($(this));
            }
        })
        .siblings("label")
            .click(function () {
                $(this).siblings(".checkbox").focus();
            });

    radios
        .click(function () {
            var radio = $(this);
            activate_radio_input(radio.siblings("input"));
        })
        .keydown(function (e) {
            // check if space is defined
            var key = e.which;

            // space is pressed on focus
            if (key === space_key || key === enter_key) {
                activate_radio_input($(this).siblings("input"));
            }
        })
        .siblings("label")
            .click(function () {
                var radio = $(this).siblings(".radio");
                activate_radio_input(radio.siblings("input"));
                radio.focus();
            })
            .mousedown(function (e) {
                e.preventDefault();
            });


    inputs
        .each(function () {
            check_label_state($(this));
        })
        .focus(function () {
            var input = $(this);
            set_label_state(input, true);
            $(this).parent().addClass("focused");
            set_input_label_as_valid(input.siblings("label"));
        })
        .blur(function () {
            var input = $(this);
            check_label_state(input);
            input.parent().removeClass("focused");
        });



    inputs.filter("[type=number]")
        .each(function(){
          // fool HTML validation, enable numeric keyboard, but not a spinner widget
          $(this).attr("type", "tel");
        })
        .keydown(function (e) {
            var key = e.which;
            var input = $(this);
            if (key === up_key) {
                step_numeric_input(input.siblings(".up"));
                e.preventDefault();
            } else if (key === down_key) {
                step_numeric_input(input.siblings(".down"));
                e.preventDefault();
            }
        });



    inputs.on("input text change paste drop", function () {
        set_input_label_as_valid($(this).siblings("label"));
    });

    var spinner_hold_timeout = 0;

    spinner_arrows
        .click(function () {
            step_numeric_input($(this));
        })
        .mousedown(function (e) {
            e.preventDefault();
            spinner_hold_timeout = setInterval(function () {
                step_numeric_input($(e.target));
            }, 150);
        })
        .bind('mouseup', function () {
            clearTimeout(spinner_hold_timeout);
        });


    if (!Modernizr.touch) {
        inputs.hover(function () {
            $(this).parent().addClass("input-hover");
        }, function () {
            $(this).parent().removeClass("input-hover");
        });
    }



    $(window).on('beforeunload', save_form_data);
    form.find("button[name=clear]").click(clear_all);
  
    function int_css(element, property){
      return parseInt(element.css(property));
    }

    function activate_radio_input(input) {
        var radio = input.siblings(".radio");
        var name = input.attr("name");
        var group = radio_inputs.filter("[name=" + name + "]");

        group.each(function () {
            $(this).prop("checked", false);
        });

        input.prop("checked", true);
    }

    function clear_form_data_from_local_storage() {
        // clear all
        var starts_with = /^compyform/;
        Object.keys(localStorage).forEach(function (key) {
            if (starts_with.test(key)) {
                localStorage.removeItem(key);
            }
        });
    }


    function set_input_label_as_valid(label){
      if (label.hasClass("invalid")) {
            // set label as valid and restore text
            label
              .removeClass("invalid")
              .text(label.data("text"));
        }
    }

    function toggle_checkbox_value(checkbox) {
        var input = checkbox.siblings("input");
        input.prop("checked", !input.prop("checked"));
    }

    function clear_all() {

        underlines
          .filter(".float-label")
            .removeClass("float-label");
        
       underline_inputs.val("");
      
        dropdowns.find(".placeholder").show();

        var invalid_labels = underline_labels.filter(".invalid");
        underline_labels.removeClass("invalid");
        

        setTimeout(function(){
          underline_labels.each(function(){
              var label = $(this);
              label.text(label.data("text"));
          });
        }, 250);
        
        checkbox_inputs
            .filter(":checked")
                .prop("checked", false);

        $('html, body').animate({
            scrollTop: form.offset().top - 10
        }, 'fast');
       
        if (Modernizr.localstorage) {
            clear_form_data_from_local_storage();
        }
    }

    function hasAttr(element, attr) {
        return typeof element.attr(attr) !== "undefined";
    }

    function set_input_as_invalid(input){
      var label = input.siblings("label");
      if (!label.hasClass("invalid")) {

            // set error text to required if empty, error if set, otherwise invalid
            var error_text;
        if(hasAttr(input, "required") && input.val() === ""){
             error_text = "Required" 
        } else {
             error_text = input.data("error") || "Invalid";
        }
            // set label as invalid, save text for later, and set text to error text
            label
                .addClass("invalid")
                .data("text", label.text())
                .text(error_text);
        }
    }

    function validate_input(input){
        var value = input.val();
        if (hasAttr(input, "required") && value === "") {
            set_input_as_invalid(input);
        } else {
          var validation = input.data('validation');
          if (validation && !validate(validation, value)) {
              set_input_as_invalid(input);
          }
        }
    }

    function validate_all() {
       inputs.each(function(){
          validate_input($(this));
       });
       return $(".invalid").size() === 0;
    }

    function step_numeric_input(arrow) {
        // assumed sanitized

        var input = arrow.siblings("input");
        var step = input.attr("step");


        if (arrow.hasClass("down")) {
            step *= -1;
        }

        var value = satitize_numeric_value(input.val());

        if (value === "") {
            value = step;
        } else {
            value = +(value) + +(step);
        }
        input.val(value);
        input.focus();
    }

    function satitize_numeric_value(value) {
        return value.replace(/[^0-9\+\-]/g, "");
    }

    function set_label_state(input, float_label) {
        if (float_label) {
            input.parent().addClass("float-label");
        } else {
            input.parent().removeClass("float-label");
        }
        // the 0.99 forces consistent AA on webkit
        // http://stackoverflow.com/a/11403025/828867
    }

    function check_label_state(input) {
        var not_empty = input.val().length > 0;
        var is_focus = input.is(":focus");
        set_label_state(input, not_empty || is_focus);
    }

    function is_valid_email_address(value) {
        var reg = /^([\w-]+\.?[\w-]*)+@([\w-]+\.[\w-]+)+$/;
        return reg.test(value);
    }

    function is_valid_number(value) {
        var reg = /^\d+$/;
        return reg.test(value);
    }

    function validate(validation, value) {
        return true;
        switch (validation) {
        case "email":
            return is_valid_email_address(value);
        case "number":
            return is_valid_number(value);
        case "password":
            return value.length > 5;
        default:
            return true;
        }
    }

    function save_form_data() {
        if (!Modernizr.localstorage) {
            // no support for html storage, bail out
            return false;
        }

        clear_form_data_from_local_storage();

        inputs.each(function () {
            var input = $(this);
            var type = input.attr("type");
            if (type === "password") {
                // skip password
                return true;
            }
            var name = input.attr("name");
            if (typeof name !== 'undefined') {

                var storage_key = "compyform:" + type + ":" + name;
                var value = input.val();
                if (type === "checkbox" || type === "radio") {
                    if (input.is(":checked")) {
                        localStorage.setItem(storage_key, value);
                    }
                } else {
                    if (value !== null && typeof value !== undefined && value.length > 0) {
                        localStorage.setItem(storage_key, value);
                    }
                }
            }
        });
    }

    function load_form_data() {
        if (!Modernizr.localstorage) {
            // no support for html storage, bail out
            return false;
        }

        inputs.each(function () {
            var input = $(this);
            var type = input.attr("type");
            if (type === "password") {
                // skip password
                return true;
            }

            var name = input.attr("name");
            if (typeof name !== 'undefined') {
                var value = localStorage.getItem("compyform:" + type + ":" + name);
                if (value !== null && typeof value !== undefined) {
                    // set the field data here
                    if (type === "checkbox") {
                     
                        input
                          .prop("checked", true)
                          .siblings(".checkbox")
                              .addClass("checked");
                   
                    } else if (type === "radio") {
                        if (value === input.val()) {
                            activate_radio_input(input);
                        }
                    } else {
                        input.val(value);
                    }
                }
            }
        });
    }
    //inputs.filter("[tabindex=1]").focus();
}

$(document).ready(setup_compy_form);
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console