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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <body class=fullwidth>
  <section class=wrap>
    <section data-theme>
      <section class=wrap>
        <h1>Self-Responsive Order Form</h1>
        <h2>With Responsive Styles Powered by Element Queries</h2>
        <h2>Default Theme</h2>
        <form style=opacity:0>
          <h3>Billing Information</h3>
          <fieldset id=billingAddress>
            <input type=text name=cc_first_name id=firstName placeholder="First Name" autocorrect=off>
            <input type=text name=cc_last_name id=lastName placeholder="Last Name" autocorrect=off>
            <input type=text name=cc_street1 id=address class=three-quarters placeholder=Street autocorrect=off>
            <input type=text name=cc_street2 id=address2 class=quarter placeholder=Apt/Suite autocorrect=off>
            <input type=text name=cc_city id=city placeholder=City autocorrect=off>
            <input type=text name=cc_state id=region placeholder=State/Province autocorrect=off>
            <input type=text name=cc_postal_code id=postal placeholder="Zip Code" autocorrect=off>
            <select name=cc_country id=country x-autocompletetype=country>
              <option value="United States">US / United States</option>
              <option value="Canada">Canada</option>
              <option value="Other">Other</option>
            </select>
          </fieldset>
          <h3 class=lockit>Credit Card Information</h3>
          <fieldset id=cardInfo>
            <input type=tel min=1 name=cc_number id=cc-number placeholder="Card Number" autocorrect=off>
            <div class=split-input>
              <select name=cc_card_type id=cardType class=three-quarters>
                <option value="">Card Type</option>
                <option value="Visa">Visa</option>
                <option value="Mastercard">Mastercard</option>
                <option value="American Express">American Express</option>
              </select>
              <input type=tel name=cvv id=cc-csc min=1 placeholder=CVV autocorrect=off class=quarter>
            </div>
            <select name=cc_exp_month id=expMonth>
              <option value="">Expiration Month</option>
              <option value="01">01 January</option>
              <option value="02">02 February</option>
              <option value="03">03 March</option>
              <option value="04">04 April</option>
              <option value="05">05 May</option>
              <option value="06">06 June</option>
              <option value="07">07 July</option>
              <option value="08">08 August</option>
              <option value="09">09 September</option>
              <option value="10">10 October</option>
              <option value="11">11 November</option>
              <option value="12">12 December</option>
            </select>
            <select id=expYear name=cc_exp_year>
              <option value="">Expiration Year</option>
              <option value=2016>2016</option>
              <option value=2017>2017</option>
              <option value=2018>2018</option>
              <option value=2019>2019</option>
              <option value=2020>2020</option>
              <option value=2021>2021</option>
              <option value=2022>2022</option>
              <option value=2023>2023</option>
              <option value=2024>2024</option>
              <option value=2025>2025</option>
              <option value=2026>2026</option>
            </select>
          </fieldset>
          <button data-button>Complete My Order!</button>
        </form>
      </section>
    </section>
    <section data-theme=dark>
      <section class=wrap>
        <h2>Dark Theme</h2>
        <form style=opacity:0>
          <h3>Billing Information</h3>
          <fieldset id=billingAddress>
            <input type=text name=cc_first_name id=firstName placeholder="First Name" autocorrect=off>
            <input type=text name=cc_last_name id=lastName placeholder="Last Name" autocorrect=off>
            <input type=text name=cc_street1 id=address class=three-quarters placeholder=Street autocorrect=off>
            <input type=text name=cc_street2 id=address2 class=quarter placeholder=Apt/Suite autocorrect=off>
            <input type=text name=cc_city id=city placeholder=City autocorrect=off>
            <input type=text name=cc_state id=region placeholder=State/Province autocorrect=off>
            <input type=text name=cc_postal_code id=postal placeholder="Zip Code" autocorrect=off>
            <select name=cc_country id=country x-autocompletetype=country>
              <option value="United States">US / United States</option>
              <option value="Canada">Canada</option>
              <option value="Other">Other</option>
            </select>
          </fieldset>
          <h3 class=lockit>Credit Card Information</h3>
          <fieldset id=cardInfo>
            <input type=tel min=1 name=cc_number id=cc-number placeholder="Card Number" autocorrect=off>
            <div class=split-input>
              <select name=cc_card_type id=cardType class=three-quarters>
                <option value="">Card Type</option>
                <option value="Visa">Visa</option>
                <option value="Mastercard">Mastercard</option>
                <option value="American Express">American Express</option>
              </select>
              <input type=tel name=cvv id=cc-csc min=1 placeholder=CVV autocorrect=off class=quarter>
            </div>
            <select name=cc_exp_month id=expMonth>
              <option value="">Expiration Month</option>
              <option value="01">01 January</option>
              <option value="02">02 February</option>
              <option value="03">03 March</option>
              <option value="04">04 April</option>
              <option value="05">05 May</option>
              <option value="06">06 June</option>
              <option value="07">07 July</option>
              <option value="08">08 August</option>
              <option value="09">09 September</option>
              <option value="10">10 October</option>
              <option value="11">11 November</option>
              <option value="12">12 December</option>
            </select>
            <select id=expYear name=cc_exp_year>
              <option value="">Expiration Year</option>
              <option value=2016>2016</option>
              <option value=2017>2017</option>
              <option value=2018>2018</option>
              <option value=2019>2019</option>
              <option value=2020>2020</option>
              <option value=2021>2021</option>
              <option value=2022>2022</option>
              <option value=2023>2023</option>
              <option value=2024>2024</option>
              <option value=2025>2025</option>
              <option value=2026>2026</option>
            </select>
          </fieldset>
          <button data-button=blue>Complete My Order!</button>
        </form>
      </section>
    </section>
    <section data-theme=code>
      <section class=wrap>
        <h2>Modal Form</h2>
        <button data-button=outline onclick=spawnModal('form')>Launch Modal</button>
        <section data-modal=form>
          <article>
            <button data-close onclick=destroyModal('form')>&times;</button>
            <section data-theme=code>
              <h2>Order Form Modal</h2>
              <form style=opacity:0>
                <h3>Billing Information</h3>
                <fieldset id=billingAddress>
                  <input type=text name=cc_first_name id=firstName placeholder="First Name" autocorrect=off>
                  <input type=text name=cc_last_name id=lastName placeholder="Last Name" autocorrect=off>
                  <input type=text name=cc_street1 id=address class=three-quarters placeholder=Street autocorrect=off>
                  <input type=text name=cc_street2 id=address2 class=quarter placeholder=Apt/Suite autocorrect=off>
                  <input type=text name=cc_city id=city placeholder=City autocorrect=off>
                  <input type=text name=cc_state id=region placeholder=State/Province autocorrect=off>
                  <input type=text name=cc_postal_code id=postal placeholder="Zip Code" autocorrect=off>
                  <select name=cc_country id=country x-autocompletetype=country>
                    <option value="United States">US / United States</option>
                    <option value="Canada">Canada</option>
                    <option value="Other">Other</option>
                  </select>
                </fieldset>
                <h3 class=lockit>Credit Card Information</h3>
                <fieldset id=cardInfo>
                  <input type=tel min=1 name=cc_number id=cc-number placeholder="Card Number" autocorrect=off>
                  <div class=split-input>
                    <select name=cc_card_type id=cardType class=three-quarters>
                      <option value="">Card Type</option>
                      <option value="Visa">Visa</option>
                      <option value="Mastercard">Mastercard</option>
                      <option value="American Express">American Express</option>
                    </select>
                    <input type=tel name=cvv id=cc-csc min=1 placeholder=CVV autocorrect=off class=quarter>
                  </div>
                  <select name=cc_exp_month id=expMonth>
                    <option value="">Expiration Month</option>
                    <option value="01">01 January</option>
                    <option value="02">02 February</option>
                    <option value="03">03 March</option>
                    <option value="04">04 April</option>
                    <option value="05">05 May</option>
                    <option value="06">06 June</option>
                    <option value="07">07 July</option>
                    <option value="08">08 August</option>
                    <option value="09">09 September</option>
                    <option value="10">10 October</option>
                    <option value="11">11 November</option>
                    <option value="12">12 December</option>
                  </select>
                  <select id=expYear name=cc_exp_year>
                    <option value="">Expiration Year</option>
                    <option value=2016>2016</option>
                    <option value=2017>2017</option>
                    <option value=2018>2018</option>
                    <option value=2019>2019</option>
                    <option value=2020>2020</option>
                    <option value=2021>2021</option>
                    <option value=2022>2022</option>
                    <option value=2023>2023</option>
                    <option value=2024>2024</option>
                    <option value=2025>2025</option>
                    <option value=2026>2026</option>
                  </select>
                </fieldset>
                <button data-button="blue">Complete My Order!</button>
              </form>
            </section>
          </article>
        </section>
      </section>
    </section>
  </section>
</body>
              
            
!

CSS

              
                /* Form Styles */
@element form {
  $this,
  $this * {
    box-sizing: border-box;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-kerning: auto;
  }
  $this {
    font-size: 10pt;
    line-height: 1.4;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
    -webkit-text-size-adjust: 100%;
    margin: 0;
    padding: 0;
    transition: opacity .3s ease-in-out;
  }
  $this:after {
    content: '';
    display: block;
    clear: both;
  }
  $this fieldset {
    border: none;
    padding: 0;
  }
  $this select,
  $this .split-input > input,
  $this .split-input > select,
  $this input,
  $this textarea {
    float: left;
    margin: 0 0 2% 0;
    margin-bottom: 2%;
    padding: 5px 8px;
    width: 49%;
    height: 40px;
    outline: none;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 2px;
    background: rgba(255,255,255,.5);
    box-shadow: rgba(0,0,0,.15) 0 1px 0;
    color: rgba(0,0,0,.7);
    font-weight: 400;
    font-size: 12pt;
    transition: all .2s ease-in-out;
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
    font-family: 'Source Sans Pro', sans-serif;
  }
  $this select:focus,
  $this .split-input > *:focus,
  $this input:focus {
    outline: none;
    border-color: orange;
    box-shadow: #fc0 0 0 3px;
  }
  $this select,
  $this .split-input select {
    color: rgba(0,0,0,.5);
    background: rgba(255,255,255,.5);
    padding-right: 1.5em;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAAAjElEQVR4Ae2QxbkCARDGMlsB2sxe1ovCKR0uuOTh9jL3fH+Gu/DPP236dG+8Pm1IGTJmdMONGZJCQs78xstJAOJGVU6wJmd2lWRGzg5BcYVqRkHAoepS0aHGAz3KV/mao6ryT5qSQCmY6YsdD5QoCZQoCZSoG1bpGle5Rii3NI6v8jVO0Cwv+OefT2IBOYykNaMbWusAAAAASUVORK5CYII=') !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - .5em) 50% !important;
    background-size: 12px !important;
    text-indent: 0.01px;
    text-overflow: '';
  }
  $this select:active,
  $this .split-input select:active {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAABBklEQVR4Ae3PQY7TQBCG0VfNLLgGd2SBhO207SBxuZgzcAsWIxfbHiuTFsnsyCd505Kf/gof1P8NPaHfX3z26rFe/IlfX7N6yT2kcFfFa9TYPuWYJw8Vc6yxyTCp7l9ULTIuIOo+3eVkWVSIDQg1x3+mMlZVthAlTyYSIZuvfWkLlpjt0ELIasq4AbUvaVEb9qKpRN3HkILDr8eXWLPa34NEMeegs4g4O7UMsTmWszHjBpRWJ4fiwrGiGt87Datqpw9RzIbri7RHdSFYDOKwKONscqwDRS4xvF3kbJJ96OqBukf1IVhzAOJshDuhKJb8Tvww2d0oNp1K/iS+2elDj/eEntCH9BdocplPRQvKAQAAAABJRU5ErkJggg==');
  }
  $this select::-ms-expand {
    display: none;
  }
  $this textarea {
    min-height: 5em;
  }
  $this select[class=three-quarters],
  $this input[class=three-quarters],
  $this textarea[class=three-quarters] {
    width: 74%;
  }
  $this select[class=quarter],
  $this input[class=quarter],
  $this textarea[class=quarter] {
    margin-left: 2% !important;
    width: 24%;
  }
  $this .split-input > select[class=three-quarters],
  $this .split-input > input[class=three-quarters],
  $this .split-input > textarea[class=three-quarters] {
    width: 73%;
  }
  $this .split-input > select[class=quarter],
  $this .split-input > input[class=quarter],
  $this .split-input > textarea[class=quarter] {
    margin-left: 4% !important;
    width: 23%;
  }
  $this .split-input {
    float: left;
    width: 49%;
    margin-bottom: 2%;
  }
  $this .split-input > input,
  $this .split-input > select {
    margin-bottom: 0;
    width: 48%;
  }
  $this .split-input input:nth-child(even),
  $this .split-input select:nth-child(even) {
    margin-left: 2%;
  }
  $this select:nth-child(even),
  $this input:nth-child(even),
  $this .split-input:nth-child(even) {
    margin-left: 2%;
  }
  $this .tooltip-inner {
    padding: 7px;
    border-radius: 2px;
    color: #fff;
    font-weight: 300;
    font-size: 12pt;
  }
  $this [type=number]::-webkit-inner-spin-button,
  $this [type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  $this [data-button] {
    width: auto;
    padding: .5em .75em;
    font-size: 18pt;
    font-weight: 700;
    font-style: italic;
    display: block;
    margin: 1em auto .5em auto;
  }
  $this .lockit {
    position: relative;
  }
  $this .lockit:after {
    content: '';
    display: block;
    width: 20px;
    height: 24px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAACACAQAAABXPgRLAAAC10lEQVR4AczYBZIbMRBA0b8UTpYdZmZmJkPBMjMzg3ntvrniE0TSTBvqHcD1PSW1JIw6znCHDyQYZZEtDkiXHLDFIqMk+MAdzhi0YdRQzzW+MksSsUgyy1euUV9zIbTzhRUKiIcCK3yhvWZCuEQPKSSgFD1cqnoIEXo5QkI6opdI1UI4zk/SiJI0PzlehRCus4QoW+J6RUOo4wtHCPqO+EJdhUI4ST9SRv2crEAIzcwjZTZPc5lDaGcNqYA12ssYQivrSIWs01qmEM6wjFTQMmf0Q6CRMaTCxmnUD4kiVRBVDuERUiWPFENoZh8JoEiSHTZLdkhSRALYp1kvxH8A7tLHK67TykmaSk7SynVe0ceu/4BUCuGe5385wWNO/udc8JgJz+96TyGEJq/D4Rx3DXbcZc7rMNkUPuQF4ijLZxoMbmjgM1nE0YuQITSy4rwqbhr8cNN5xazQGC7kIeJklfaAd/1VxMnDUCGOy3KDFkMwtLDhtoWECKGTHGKV5KIhOC6SRKxydAYP+aSyELU2lE/BQ1y2yCFDeAy5bO0BQ2gjg1hk6FAJ6XD6rbZgIU8Qq4RBBwnE6kmAEBqIOizAiFpIxGFjidLgH9LMlP3iY9DDOGIxRbN/yBWHqftWNeStw+nhin/IE+tJKMdF1ZCL5KynuSf+IZ+tb4k7NKqGNLJjfYf87B9iX+rTBl1M25e7f0g3YtGjHtKDWHTbQ/yvtzH1kJj/tdceMohY/FUP+YtYDJYjJKoeEv3Xvn1bIRBDQQDc3q4BfBWY6JwiSoccz+GZt6ncZDJfHwgBAQEBAQEBAQEBAQEBWXzkmX1xO2R8cdDq4ZDq4pzjk32zSpfmSC5fKZc0D065fG1+tF+3V6TL9gfSJe1PQFoQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBCQrwgICAjID31N2qSk+/KUbHbkNUUFcs65wAAAAABJRU5ErkJggg==') no-repeat;
    background-size: 20px 24px;
    background-position: middle bottom;
    position: absolute;
    bottom: .25em;
    right: 0;
  }
}
@element form and (max-width: 450px) {
  $this select,
  $this .split-input,
  $this .split-input > *,
  $this input {
    width: 100%;
  }
  $this .split-input {
    margin-bottom: 0;
  }
  $this .split-input > input,
  $this .split-input > select {
    margin-bottom: 2%;
    width: 100%;
  }
  $this select:nth-child(even),
  $this input:nth-child(even),
  $this .split-input:nth-child(even) {
    margin-left: 0;
  }
  $this .lockit:after {
    display: none;
  }
  $this .split-input > select[class=three-quarters],
  $this .split-input > input[class=three-quarters],
  $this .split-input > textarea[class=three-quarters] {
    width: 74%;
  }
  $this .split-input > select[class=quarter],
  $this .split-input > input[class=quarter],
  $this .split-input > textarea[class=quarter] {
    margin-left: 2% !important;
    width: 24%;
  }
}
/* Theme Support */
[data-theme=default] form select,
[data-theme=default] form .split-input > input,
[data-theme=default] form .split-input > select,
[data-theme=default] form input {
  border: 1px solid rgba(255,255,255,.7) !important;
  background: rgba(255,255,255,.5) !important;
  box-shadow: rgba(0,0,0,.15) 0 1px 0 !important;
  color: rgba(0,0,0,.7) !important;
}
[data-theme=default] form select:focus,
[data-theme=default] form .split-input > *:focus,
[data-theme=default] form input:focus {
  border-color: orange !important;
  box-shadow: #fc0 0 0 3px !important;
}
[data-theme=code] form select,
[data-theme=code] form .split-input > input,
[data-theme=code] form .split-input > select,
[data-theme=code] form input {
  border: 1px solid rgba(0,0,0,.25);
  border-radius: 2px;
  background: #002b36;
  box-shadow: rgba(0,0,0,.15) 0 1px 0;
  color: #eee8d5;
}
[data-theme=code] form select,
[data-theme=code] form .split-input > select {
  color: rgba(255,255,255,.3);
}
[data-theme=code] form select:focus,
[data-theme=code] form .split-input > *:focus,
[data-theme=code] form input:focus {
  border-color: #2aa198;
  box-shadow: #2aa198 0 0 3px;
}
[data-theme=dark] form select,
[data-theme=dark] form .split-input > input,
[data-theme=dark] form .split-input > select,
[data-theme=dark] form input {
  border: 1px solid rgba(0,0,0,.25);
  border-radius: 2px;
  background: rgba(0,0,0,.3);
  box-shadow: rgba(0,0,0,.15) 0 1px 0;
  color: rgba(255,255,255,.8);
}
[data-theme=dark] form select,
[data-theme=dark] form .split-input > select {
  color: rgba(255,255,255,.3);
}
[data-theme=dark] form select:focus,
[data-theme=dark] form .split-input > *:focus,
[data-theme=dark] form input:focus {
  border-color: #6c71c4;
  box-shadow: #6c71c4 0 0 3px;
}
@element form {
  $this {
    opacity: 1 !important;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console