cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

              <div class="esu-form-div  esu-from-shortcode"><form id="esun1BZIiVMQgrjLQiUW6WG" name="esun1BZIiVMQgrjLQiUW6WG">
<input type="hidden" id="esun1BZIiVMQgrjLQiUW6WG_lama" name="esun1BZIiVMQgrjLQiUW6WG_lama" value="302f9c8d5f"><input type="hidden" name="_wp_http_referer" value="/new/custom-css/">
<input type="hidden" name="esu_formID" value="esun1BZIiVMQgrjLQiUW6WG">
<input type="hidden" name="esu_label" value="Easy Sign Up">
<input type="hidden" name="esu_permalink" value="http://localhost:8888/new/custom-css/">

<li class="esu-form-title">Easy Sign Up Form</li>
<li><label for="esun1BZIiVMQgrjLQiUW6WG_fname" class="esu-default">First Name</label><input id="esun1BZIiVMQgrjLQiUW6WG_fname" class=" esu-text esu-required-input esu-input esu-default" name="esun1BZIiVMQgrjLQiUW6WG_fname" type="text" placeholder="First Name"><br class="esu-default"></li>
<li><label for="esun1BZIiVMQgrjLQiUW6WG_lname" class="esu-default">Last Name</label><input id="esun1BZIiVMQgrjLQiUW6WG_lname" class=" esu-text esu-required-input esu-input esu-default" name="esun1BZIiVMQgrjLQiUW6WG_lname" type="text" placeholder="Last Name"><br class="esu-default"></li>
<li><label for="esun1BZIiVMQgrjLQiUW6WG_email" class="esu-default">Email</label><input id="esun1BZIiVMQgrjLQiUW6WG_email" class=" esu-text esu-required-email esu-input esu-default" name="esun1BZIiVMQgrjLQiUW6WG_email" type="text" placeholder="Email"><br class="esu-default"></li>
<li><label for="esun1BZIiVMQgrjLQiUW6WG_phone" class="esu-default">Phone</label><input id="esun1BZIiVMQgrjLQiUW6WG_phone" class=" esu-text esu-required-phone esu-input esu-default" name="esun1BZIiVMQgrjLQiUW6WG_phone" type="text" placeholder="Phone"><br class="esu-default"></li>
<li><input id="esun1BZIiVMQgrjLQiUW6WG_send" class=" esu-submit esu-button" name="esu_send_bnt" type="submit" value="Send "></li>
              /* Default styles */
.esu-form-div input  {
border: 1px solid #d2d2d2;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
background-color: rgba(64, 64, 64, 0.1);

/*Easy sign up short code form div */
div.esu-form-div label.esu-left{float:left;width:120px;font-weight:700}
        div.esu-form-div input.esu-left,div.esu-form-div textarea.esu-left{width:180px}
        div.esu-form-div label.esu-top{display:block;width:120px;font-weight:700}
        div.esu-form-div input.esu-top,div.esu-form-div textarea.esu-top{width:180px}

Styles from the Easy Sign Up Styles Extra Plugin 
ID's have underscores "_"
Classes have dashes "-"
/* New with version 3 */
/*Easy sign up short code form div */
div.esu-form-div{ display: table; }
div.esu-form-div ul{ list-style: none; margin:0;}
div.esu-form-div ul li { margin: auto; padding:4px;display:block;}
div.esu-form-div input[type=image]{ border: none;background: transparent;box-shadow:none; }
div.esu-form-div input[type=image],div.esu-form-div input[type=submit]{ cursor: pointer;  }
#esu_err {
  list-style: none; padding: 10px;
  line-height: normal;  z-index: 100000;  margin: 0px;
#esu_err ul { margin: auto; display: table; list-style: none; }
#esu_err ul li { padding-bottom: 2px; }
div.esu-form-div label.esu-default, .esu-hide{position:absolute!important;top:-9999px!important;left:-9999px!important} br.esu-left{clear:left;}
              $('li:last').prepend('<p>*we promise never to sell your email, spam you, etc.</p>');
Loading ..................