Title: CSS issues to customize form fields
Last modified: September 3, 2019

---

# CSS issues to customize form fields

 *  Resolved [leonore33](https://wordpress.org/support/users/leonore33/)
 * (@leonore33)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/css-issues-to-customize-form-fields/)
 * Hello,
 * I am working locally so unfortunately I cannot provide a link. I use Elementor
   and Ocean WP theme, and browse with Google Chrome. I am new to wp and CSS and
   to customize my newsletter form, I am running into 3 issues :
 * 1- I changed font family and letter spacing inside name and email fields using
   costumized CSS (I don’t display label names) but it put the text off center so
   I used padding from my theme customizer (General options -> Forms(Input-textarea))
   to recenter it. As a result, the cursor is not centered and is larger than the
   text. Maybe you could provide some CSS to affect the cursor ?
    Here is the CSS
   I used :
 * div.wpforms-container-full .wpforms-form input.wpforms-field-large, div.wpforms-
   container-full .wpforms-form select.wpforms-field-large, div.wpforms-container-
   full .wpforms-form .wpforms-field-row.wpforms-field-large {
    font-family: “Arima
   Madurai” !important; letter-spacing: 4px }
 * 2- I want to change the text color displayed inside both fields but every code
   I found failed. I can change the color of the input through my theme customizer
   but it doesn’t affect what is displayed before someone fills them. I tried those
   codes :
 * div.wpforms-container-full .wpforms-form .wpforms-field-sublabel {
    color: rgba(
   145,145,145,0.53)!important; }
 * div.wpforms-container-full .wpforms-form .wpforms-field-label {
    color: rgba(
   145,145,145,0.53)!important; }
 * div.wpforms-container-full .wpforms-form .wpforms-field-label-inline {
    color:
   rgba(145,145,145,0.53)!important; }
 * None of them worked (I don’t know if I have the right target).
 * 3- My submit button automatically grows when hovered in the theme customizing
   panel and makes the bottom section grow as well, but not in the Elementor panel,
   and in the Elementor panel the labels and * still show even though I checked 
   not to display them from WPForms directly (but they don’t appear in customizer).
   I tried to make the growing disappear with this CSS but no luck either :
 * .div.wpforms-container-full .wpforms-form input[type=submit]:hover {
    animation:
   none !important; }
 * If you can give me any help I would highly appreciate it, I am sure those are
   basic issues but I haven’t found my answers after hours of searching online. 
   Thank you so much in advance.

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

 *  Thread Starter [leonore33](https://wordpress.org/support/users/leonore33/)
 * (@leonore33)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/css-issues-to-customize-form-fields/#post-11896135)
 * Actually for point 3 I also tried this code without success :
 * .div.wpforms-container-full .wpforms-form input[type=submit],
    div.wpforms-container-
   full .wpforms-form button[type=submit]:hover { animation: none !important; }
 * And I realize it is not really that it makes the bottom section grow, it makes
   the whole page (from submit button down) go a little down until I take the cursor
   off of it.
 *  Thread Starter [leonore33](https://wordpress.org/support/users/leonore33/)
 * (@leonore33)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/css-issues-to-customize-form-fields/#post-11896174)
 * To help, here are 3 screenshots :
 * – When submit button hovered (in the visit site panel): [https://prnt.sc/p1g0h6](https://prnt.sc/p1g0h6)
 * – When submit button not hovered + text cursor off center and too large in email
   field (in the visit site panel): [https://prnt.sc/p1g185](https://prnt.sc/p1g185)
 * – In Elementor with submit button hovered (no border and no effect on the rest
   of the page) and labels still showing: [https://prnt.sc/p1g1t4](https://prnt.sc/p1g1t4)
 *  Plugin Support [Ethan Choi](https://wordpress.org/support/users/ethanchoi/)
 * (@ethanchoi)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/css-issues-to-customize-form-fields/#post-11903328)
 * Hi [@leonore33](https://wordpress.org/support/users/leonore33/),
 * Unfortunately the padding within the field input shifts all elements within the
   field, including the placeholder text, input text and the cursor as well.
 * To change the color of the placeholder text, you can use the [custom CSS found in this tutorial](https://wpforms.com/developers/style-placeholder-text-for-form-fields/).
 * It seems like the issue could be due to the preview screen of Elementor, which
   does not load the actual form styles correctly. Is the issue with the size change
   when hovering over the submit button present when the form is published?
 * Please let me know.
 * Thanks.
 *  Thread Starter [leonore33](https://wordpress.org/support/users/leonore33/)
 * (@leonore33)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/css-issues-to-customize-form-fields/#post-11907850)
 * Thank you for your reply!
 * Is there a way to recenter the placeholder text after I changed the font family
   without using padding?
 * Thank you, the change of color worked perfectly.
 * Actually the issue when hovering (that makes the rest of the page slightly move
   down) has been happening after the form was published, when I am in the customizer
   page or preview page. I does not happen in Elementor, which makes me think it
   will keep happening when the site is online. Any thought why it does that?
 * Thank you in advance !
 *  Plugin Support [Ethan Choi](https://wordpress.org/support/users/ethanchoi/)
 * (@ethanchoi)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/css-issues-to-customize-form-fields/#post-11914867)
 * Hi [@leonore33](https://wordpress.org/support/users/leonore33/),
 * Thanks for the update!
 * To target the placeholder text specifically, you can try the following custom
   CSS:
 *     ```
       .wpforms-container ::-webkit-input-placeholder { /* Chrome and Safari */
       	padding-left: 15px !important;
       }
   
       .wpforms-container :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
       	padding-left: 15px !important;
          opacity: 1;
       }
   
       .wpforms-container ::-moz-placeholder { /* Mozilla Firefox 19+ */
       	padding-left: 15px !important;
          opacity: 1;
       }
   
       .wpforms-container :-ms-input-placeholder { /* Internet Explorer 10-11 */
       	padding-left: 15px !important;
       }
   
       .wpforms-container ::-ms-input-placeholder { /* Microsoft Edge */
       	padding-left: 15px !important;
       }
       ```
   
 * When you get the chance, could you share a link to the form on your site so we
   can take a closer look at the submit button issue?
 * Thanks!
 *  Plugin Support [Ethan Choi](https://wordpress.org/support/users/ethanchoi/)
 * (@ethanchoi)
 * [6 years, 7 months ago](https://wordpress.org/support/topic/css-issues-to-customize-form-fields/#post-11937259)
 * Hi [@leonore33](https://wordpress.org/support/users/leonore33/),
 * We haven’t heard back from you in about a week, so I’m going to go ahead and 
   close this thread for now. But if you’d like us to assist, please feel welcome
   to continue the conversation (please just see my post above).
 * Thanks!

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

The topic ‘CSS issues to customize form fields’ is closed to new replies.

 * ![](https://ps.w.org/wpforms-lite/assets/icon.svg?rev=3254748)
 * [WPForms - Easy Form Builder for WordPress - Contact Forms, Payment Forms, Surveys, & More](https://wordpress.org/plugins/wpforms-lite/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wpforms-lite/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wpforms-lite/)
 * [Active Topics](https://wordpress.org/support/plugin/wpforms-lite/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wpforms-lite/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wpforms-lite/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [field color](https://wordpress.org/support/topic-tag/field-color/)
 * [Form Customization](https://wordpress.org/support/topic-tag/form-customization/)
 * [submit button](https://wordpress.org/support/topic-tag/submit-button/)

 * 6 replies
 * 2 participants
 * Last reply from: [Ethan Choi](https://wordpress.org/support/users/ethanchoi/)
 * Last activity: [6 years, 7 months ago](https://wordpress.org/support/topic/css-issues-to-customize-form-fields/#post-11937259)
 * Status: resolved