styling problems with css

Resolved seto76
(@seto76)

1 year, 6 months ago
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

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

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

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

this is my custom css for the buttons
```
/* 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
(@rsouzaam)

1 year, 6 months ago

Hi @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.

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
(@seto76)

1 year, 6 months ago

hi ralden,

thanks for getting back. you will find the form at: https://www.srv1.cyou/limu

thanks in advance
regards sergio
Plugin Support Ralden Souza
(@rsouzaam)

1 year, 6 months ago
Hi @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. 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), and based on the location of the custom CSS (screenshot), 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.

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).
```
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.

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 on WPForms » Settings » CAPTCHA. Ensure that the reCAPTCHA keys match the same reCAPTCHA type configured in WPForms.

If you’d like more help with using WPForms Lite, please feel free to reach out.

Thanks!
Thread Starter seto76
(@seto76)

1 year, 6 months ago

hi ralden, thanks for getting back.

You can use the CSS snippet below (screenshot of the result you should see).

your css code has worked for the button border. thank you.

You can add background: #fff; to your custom CSS to fix this — screenshot.

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
(@rsouzaam)

1 year, 6 months ago

Hi @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.

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 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
(@rsouzaam)

1 year, 6 months ago

Hi @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
(@seto76)

1 year, 6 months ago

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
(@rsouzaam)

1 year, 6 months ago

Hi @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.

Thanks!

Thread Starter seto76
(@seto76)

1 year, 6 months ago

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
(@rsouzaam)

1 year, 6 months ago

Hi @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.