Form Style Overridden by X

[uxmediahouse]

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?

[jade]

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.

[uxmediahouse]

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.

[thai]

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

[uxmediahouse]

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

[thai]

Glad I was able to help you