Title: Custom CSS to adjust specific input fields
Last modified: August 31, 2016

---

# Custom CSS to adjust specific input fields

 *  Resolved [acann](https://wordpress.org/support/users/acann/)
 * (@acann)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/custom-css-to-adjust-specific-input-fields/)
 * Can anyone help me with some custom CSS I can use to adjust the width and placement
   of specific input fields in a magic action box? For example if I have email, 
   name and then three fields to make up a date (MM field, DD field and YYYY field).
   By default they will all inherit the same width setting from the action box config.
   What I want to do is have them like this:
    Email Name MM DD YYYY
 * So the first two are default width and stacked vertically, but the last three
   are smaller in width and displayed on the same line.
 * Any suggestions? I can put it on a webpage and post the link if it helps, but
   currently I don’t have it live anywhere on the site, just preview pages until
   I get it working.
 * Thanks for any help!
 * [https://wordpress.org/plugins/magic-action-box/](https://wordpress.org/plugins/magic-action-box/)

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Plugin Author [Ryann Micua](https://wordpress.org/support/users/pogidude/)
 * (@pogidude)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/custom-css-to-adjust-specific-input-fields/#post-6913751)
 * Hi [@acann](https://wordpress.org/support/users/acann/),
 * Try putting up the page and post the link here and we’ll see what we can do.
 *  Thread Starter [acann](https://wordpress.org/support/users/acann/)
 * (@acann)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/custom-css-to-adjust-specific-input-fields/#post-6913770)
 * Thanks! Here is a test page I have put up for you to see an example of the form
   I’d like to alter so the three date fields are a shorter width and on the same
   line.
 * [http://www.eyecandypopper.com/testpage/](http://www.eyecandypopper.com/testpage/)
 *  Thread Starter [acann](https://wordpress.org/support/users/acann/)
 * (@acann)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/custom-css-to-adjust-specific-input-fields/#post-6913915)
 * Any suggestions?
 *  Plugin Author [Ryann Micua](https://wordpress.org/support/users/pogidude/)
 * (@pogidude)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/custom-css-to-adjust-specific-input-fields/#post-6913924)
 * Try replacing the code inside the Processed Form Code field with the one below:
 *     ```
       <form action="//eyecandypopper.us8.list-manage.com/subscribe/post?u=effbdcf154311f0fe1a6c2874&id=5b57364acd" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" _lpchecked="1">
       <div class="mab-field">
       <label for="mce-EMAIL"><span class="asterisk"></span></label> <input type="email" name="EMAIL" id="mce-EMAIL" placeholder="email*" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=&quot;);">
       </div>
       <div class="mab-field">
       <label for="mce-FNAME"></label> <input type="text" name="FNAME" id="mce-FNAME" placeholder="first name">
       </div>
       <div class="form-dates">
       <label for="mce-MMERGE3-month">Cleanse Start Date  <span class="asterisk">*</span></label>
       <div class="mab-field">
       <input type="text" pattern="[0-9]*" placeholder="MM" size="2" maxlength="2" name="MMERGE3[month]" id="mce-MMERGE3-month">
       </div>
       <div class="mab-field">
       <label for="mce-MMERGE3-day"></label> <input type="text" pattern="[0-9]*" placeholder="DD" size="2" maxlength="2" name="MMERGE3[day]" id="mce-MMERGE3-day">
       </div>
       <div class="mab-field">
       <label for="mce-MMERGE3-year"></label> <input type="text" pattern="[0-9]*" placeholder="YYYY" size="4" maxlength="4" name="MMERGE3[year]" id="mce-MMERGE3-year">
       </div>
       </div><!-- .form-dates -->
       <div class="mab-field mablast">
       <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="mab-optin-submit" value="Submit">
       </div>
       <div class="clear"></div>
       </form>
       ```
   
 * Then, add the following custom css code:
 *     ```
       .magic-action-box .mab-main-action-wrap .form-dates .mab-field{ display: inline-block; margin-right: 2%; width: 25%; }
       .magic-action-box .mab-main-action-wrap .form-dates .mab-field input{ box-sizing: border-box; width: 100%; }
       ```
   
 *  Thread Starter [acann](https://wordpress.org/support/users/acann/)
 * (@acann)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/custom-css-to-adjust-specific-input-fields/#post-6913949)
 * Thanks so much, there was some extra stuff in there like
    url("data:image/png;
   base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII
   ="
 * but I saw your changes and transferred them and it did indeed work. I ended up
   not using it because I hadn’t anticipated how that would look on mobile (too 
   squished).
 * In either case, your solution is accurate so I am marking this as resolved. Thanks
   so much for taking the time to respond!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Custom CSS to adjust specific input fields’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/magic-action-box_318aa7.svg)
 * [Magic Action Box](https://wordpress.org/plugins/magic-action-box/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/magic-action-box/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/magic-action-box/)
 * [Active Topics](https://wordpress.org/support/plugin/magic-action-box/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/magic-action-box/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/magic-action-box/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [custom](https://wordpress.org/support/topic-tag/custom/)
 * [input](https://wordpress.org/support/topic-tag/input/)
 * [width](https://wordpress.org/support/topic-tag/width/)

 * 5 replies
 * 2 participants
 * Last reply from: [acann](https://wordpress.org/support/users/acann/)
 * Last activity: [10 years, 4 months ago](https://wordpress.org/support/topic/custom-css-to-adjust-specific-input-fields/#post-6913949)
 * Status: resolved