Title: styling problems with css
Last modified: November 19, 2024

---

# styling problems with css

 *  Resolved [seto76](https://wordpress.org/support/users/seto76/)
 * (@seto76)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/styling-problems-with-css/)
 * hi wpforms support,
   I have a problem with the styling of dropdown fields, text
   fields and buttons.how can i prevent the hover effect (white bar) from being 
   applied to an item that has been selected in the dropdown field using css?
 * [https://imgur.com/a/8Rfibvk](https://imgur.com/a/8Rfibvk)
 * why does the background color in the text field name and e-mail change? it looks
   as if the original color is darkened. but i haven’t set this anywhere. how can
   i prevent this?
 * [https://imgur.com/a/DCemFau](https://imgur.com/a/DCemFau)
 * then an outline appears on the button when you click with the mouse. i haven’t
   declared this anywhere either. i’ve been looking for it in the css for a day,
   but can’t find the position. i couldn’t deactivate it with “outline: 0 !important”.
   how can i remove this outline?
 * [https://imgur.com/a/1cOP1o7](https://imgur.com/a/1cOP1o7)
 * with the hover effect on the button, the background appears in gray instead of
   white. i haven’t declared this anywhere either. i don’t understand where this
   comes from. how can this be corrected?
 * [https://imgur.com/a/ZGJzCqf](https://imgur.com/a/ZGJzCqf)
 * this is my custom css for the buttons
 *     ```wp-block-code
       /* WPFORMS BUTTONS */div.wpforms-container .wpforms-form input[type=submit], div.wpforms-container .wpforms-form button[type=submit], div.wpforms-container .wpforms-form .wpforms-page-button{background-color: #2065DF !important;color: #fff !important;border: 1px solid #fff !important;font-family: Arial !important;font-weight: bold !important;font-size: 16px !important;text-transform: uppercase !important;letter-spacing: 0.5px !important;padding-right: 20px !important;padding-left: 20px !important;}/* WPFORMS BUTTONS | HOVER */div.wpforms-container .wpforms-form input[type=submit]:hover, div.wpforms-container .wpforms-form button[type=submit]:hover, div.wpforms-container .wpforms-form .wpforms-page-button:hover{background-color: #fff !important;color: #2065DF !important;border: 1px solid #2065DF !important;font-family: Arial !important;font-weight: bold !important;font-size: 16px !important;text-transform: uppercase !important;letter-spacing: 0.5px !important;padding-right: 20px !important;padding-left: 20px !important;}
       ```
   
 * thank you very much in advance
   kind regards,sergio

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

 *  Plugin Support [Ralden Souza](https://wordpress.org/support/users/rsouzaam/)
 * (@rsouzaam)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/styling-problems-with-css/#post-18149903)
 * Hi [@seto76](https://wordpress.org/support/users/seto76/),
 * Thanks for reaching out!
 * From your screenshots, it seems there might be a styling conflict between your
   site’s theme or custom CSS and your forms.
 * You can see the default styling of WPForms on our [Templates page](https://wpforms.com/templates/).
 * When you have a chance, please share the URL to access your form. This will help
   me identify which classes are affecting the form styles and provide further information
   on how to address the issue.
 * Thanks! I look forward to hearing from you.
 *  Thread Starter [seto76](https://wordpress.org/support/users/seto76/)
 * (@seto76)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/styling-problems-with-css/#post-18151648)
 * hi ralden,
   thanks for getting back. you will find the form at: [https://www.srv1.cyou/limu](https://www.srv1.cyou/limu/)
   thanks in advanceregards sergio
 *  Plugin Support [Ralden Souza](https://wordpress.org/support/users/rsouzaam/)
 * (@rsouzaam)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/styling-problems-with-css/#post-18153704)
 * Hi [@seto76](https://wordpress.org/support/users/seto76/),
 * Thanks for sharing the URL!
 * > how can i prevent the hover effect (white bar) from being applied to an item
   > that has been selected in the dropdown field using css?
 * This was configured with a custom CSS snippet using the **!important** tag — 
   [screenshot](https://a.supportally.com/i/lBn6hi). Because of the **!important**
   flag, you need to locate this CSS snippet and edit it.
 * Since you’re using Elementor Pro (which allows [Custom CSS](https://elementor.com/help/how-to-add-custom-css/)),
   and based on the location of the custom CSS ([screenshot](https://a.supportally.com/i/MESyia)),
   it might be in the **Custom CSS** section of the WPForms widget or the page itself.
 * If you’re using a template, you’ll need to check where you can edit the CSS of
   the template.
 * > why does the background color in the text field name and e-mail change?
 * The Name, Email, and Message fields were customized to use the same `background
   color: **var(–e-global-color-f17cec5)** `— [screenshot](https://a.supportally.com/i/6M1UZ8).
 * Because of the **!important** tag, if you’d like to change the background color
   of these fields, you’ll need to locate the custom CSS applied to them and edit
   it.
 * > then an outline appears on the button when you click with the mouse. how can
   > i remove this outline?
 * You can use the CSS snippet below ([screenshot of the result you should see](https://a.supportally.com/i/i6XGq8)).
 *     ```wp-block-code
       div.wpforms-container-full input[type=submit]:focus:after, div.wpforms-container-full button[type=submit]:focus:after, div.wpforms-container-full .wpforms-page-button:focus:after, .wp-core-ui div.wpforms-container-full input[type=submit]:focus:after, .wp-core-ui div.wpforms-container-full button[type=submit]:focus:after, .wp-core-ui div.wpforms-container-full .wpforms-page-button:focus:after{    border: none;}
       ```
   
 * In case the CSS snippet doesn’t work, please add the !important tag.
 * > with the hover effect on the button, the background appears in gray instead
   > of white.
 * You can add `background: #fff;` to your custom CSS to fix this — [screenshot](https://a.supportally.com/i/H5UPxT).
 * I hope this helps!
 * Regarding the “ERROR for site owner: Invalid domain for site key” in Google reCAPTCHA,
   I recommend reviewing the [Google reCAPTCHA keys](https://wpforms.com/docs/how-to-set-up-and-use-recaptcha-in-wpforms/#invalid-domain)
   on **WPForms » Settings » CAPTCHA**. Ensure that the reCAPTCHA keys match the
   same [reCAPTCHA type](https://developers.google.com/recaptcha/docs/versions) 
   configured in WPForms.
 * If you’d like more help with using WPForms Lite, please feel free to reach out.
 * Thanks!
 *  Thread Starter [seto76](https://wordpress.org/support/users/seto76/)
 * (@seto76)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/styling-problems-with-css/#post-18155087)
 * hi ralden, thanks for getting back.
 * >  You can use the CSS snippet below ([screenshot of the result you should see](https://a.supportally.com/i/i6XGq8)).
 * your css code has worked for the button border. thank you.
 * >  You can add `background: #fff;` to your custom CSS to fix this — [screenshot](https://a.supportally.com/i/H5UPxT).
 * background: #fff; worked. background-color: #fff; didn’t. that’s kinda weird.
 * >  This was configured with a custom CSS snippet using the !important tag — screenshot.
   > Because of the !important flag, you need to locate this CSS snippet and edit
   > it.
 * the custom snippet is mine. i have placed it in the elementor custom css template,
   in which the contact form is embedded. i have placed the colors for a and a:hover.
   but i don’t know how to deactivate the a:hover for a selected item in the dropdown
   menu. is there any way to address the selected item?
 * >  The Name, Email, and Message fields were customized to use the same background
   > color: var(–e-global-color-f17cec5)— screenshot.
 * when the form is filled out manually, everything works fine, and the color doesn’t
   change. however, i filled out the form using a password manager to save time 
   during testing and noticed that the field color changes. could this have something
   to do with `a:active` or `a:focus` states? i haven’t explicitly set anything 
   in the code to make the color change. is this a wpforms issue or related to the
   astra theme?
 * thanks in advance
 *  Plugin Support [Ralden Souza](https://wordpress.org/support/users/rsouzaam/)
 * (@rsouzaam)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/styling-problems-with-css/#post-18165116)
 * Hi [@seto76](https://wordpress.org/support/users/seto76/),
 * Thanks for your follow-up questions!
 * > background: #fff; worked. background-color: #fff; didn’t. that’s kinda weird.
 * This is because some CSS classes were using the `background` property (instead
   of `background-color`) in the hover state, which was loading the gray color.
 * By applying `background: #fff !important;`, your button now displays the hover
   state with a white background color.
 * > i have placed the colors for a and a:hover. but i don’t know how to deactivate
   > the a:hover for a selected item in the dropdown menu. is there any way to address
   > the selected item?
 * Unfortunately, this is not possible right now, as the `.choices__item--selectable`
   class is applied to both the hover state for available options and the selected
   options. — [screenshot](https://a.supportally.com/i/v4BatZ).
 * I’ve made a note of the feature request and we’ll keep it on our radar to be 
   reviewed as we plan out our roadmap for the future.
 * > when the form is filled out manually, everything works fine, and the color 
   > doesn’t change. however, i filled out the form using a password manager to 
   > save time during testing and noticed that the field color changes.
 * I could reproduce the issue using 1Password. However, regarding 1Password, the
   dark blue color originates directly from the password manager extension in the
   browser.
 * Here’s [a 1Password topic](https://1password.community/discussion/117711/legibility-issues-with-some-fields)
   with more details.
 * To adjust the background color, you’d need to reach out to your password manager’s
   support team to see if they can offer a solution to your request.
 * I hope this helps! If you’d like more assistance with WPForms Lite, please feel
   free to reach out.
 * Thanks!
 *  Plugin Support [Ralden Souza](https://wordpress.org/support/users/rsouzaam/)
 * (@rsouzaam)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/styling-problems-with-css/#post-18172861)
 * Hi [@seto76](https://wordpress.org/support/users/seto76/),
 * We haven’t heard back from you in a few days, so I’m going to go ahead and close
   this thread for now. But if you’d like us to assist further, please feel welcome
   to continue the conversation.
 * Thanks!
 *  Thread Starter [seto76](https://wordpress.org/support/users/seto76/)
 * (@seto76)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/styling-problems-with-css/#post-18173141)
 * hi ralden.
 * thank you for your help. i guess i have no choice but to deactivate the hover
   effect, which is a pity.
 * regards sergio
 *  Plugin Support [Ralden Souza](https://wordpress.org/support/users/rsouzaam/)
 * (@rsouzaam)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/styling-problems-with-css/#post-18176552)
 * Hi [@seto76](https://wordpress.org/support/users/seto76/),
 * I understand, and unfortunately, for now, the hover effect applies either to 
   all choices or to none.
 * I hope we can release an improvement for this in the near future.
 * Alternatively, you could consider creating a custom code solution to achieve 
   this specific customization.
 * I apologize as customizations like this are outside of our scope for support.
   In case you’d like to look into custom development options, we highly recommend
   posting your customization job [here](https://jobs.wordpress.net/).
 * Thanks!
 *  Thread Starter [seto76](https://wordpress.org/support/users/seto76/)
 * (@seto76)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/styling-problems-with-css/#post-18180966)
 * hi ralden,
   nevertheless, thank you very much for your help. if you should change
   this at some point, i would be very grateful if you would think of me and let
   me know here.
 * best regards
   sergio
 *  Plugin Support [Ralden Souza](https://wordpress.org/support/users/rsouzaam/)
 * (@rsouzaam)
 * [1 year, 6 months ago](https://wordpress.org/support/topic/styling-problems-with-css/#post-18182546)
 * Hi [@seto76](https://wordpress.org/support/users/seto76/),
 * Sure, I made sure that your email is noted in the feature request report, so 
   you should receive an update when this adjustment becomes available in a future
   release.
 * If you need any further assistance with WPForms Lite, don’t hesitate to reach
   out.
 * Thanks!

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

The topic ‘styling problems with css’ 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/)

 * 10 replies
 * 2 participants
 * Last reply from: [Ralden Souza](https://wordpress.org/support/users/rsouzaam/)
 * Last activity: [1 year, 6 months ago](https://wordpress.org/support/topic/styling-problems-with-css/#post-18182546)
 * Status: resolved