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. 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

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

              
                <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>
              
            
!

CSS

              
                /* 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;
}
              
            
!

JS

              
                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

Console