Form Style Overridden by X

Hi,

For the life of me I cant seem to style certain elements of my form. I am using Ninja Forms, and I can get most elements styled, BUT, it seems like the style for drop-downs is always overriden by the Pro theme.

I am trying to add the border-radius:0px; to two elements in the form and it just wont work. They are the “drop-down” elements of the form on this page:
https://beta.solacepediatrichealthcare.com/apply-now/

I have styled most of the form through the custom.css file. Please help? Is this you guys or should I contact Ninja Forms?

Hi there,

The user that you provided doesn’t seem to have the access to edit the style.css file of the child theme and as I have check the code you have added seems to work fine:

.nf-field-element select {
    font-size: 16px;
    padding: 9px;
    border-radius: 0px !important;
    height: 40px !important;
}

Try adding a value to the border radius then clear your browser cache before checking the page.

Sorry, I usually login to FTP to do that, Ill provide it above.

In any case, Yes, I do have that code in the custom.css file, and I have the cache disabled. As you can see from the screenshot some of my styles are working, but the dropdowns just wont for some reason.

Hi There,

Please try adding this custom CSS instead:

.nf-field-element select {
    -webkit-appearance: none;
    -webkit-border-radius: 0 !important;
}

For more information, please take a look at this article: https://stackoverflow.com/questions/2918707/turn-off-iphone-safari-input-element-rounding.

Hope it helps :slight_smile:

Thank you!! I should have know about the webkit-border-radius, but the -webkit-appearance was new to me. Thanks!

1 Like

Glad I was able to help you :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.