Skip Navigation

[Resolved] Styling Drop Down CRED Forms

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will start replying to tickets in about 6.60 hours from now. Thank you for your understanding.

This topic contains 1 reply, has 2 voices.

Last updated by Waqar 1 year, 9 months ago.

Assigned support staff: Waqar.

Author
Posts
#1294343
Screen Shot 2019-07-18 at 1.12.40 AM.png

Tell us what you are trying to do?
I'd like to style to look of the drop down fields in a Views form I've created.

Is there any documentation that you are following?
I looked at the Styling Cred Forms documentation, but had a hard time actually styling the dropdown. I'd like to change the blue to a pink and if possible style the dropdown arrows. Ideally, each dropdown could have its own highlight color.

Is there a similar example that we can see?
I am attaching a link to the client's "dream version", we agreed adding a simple brand color would be enough

What is the link to your site?
hidden link

#1294547

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Lilian,

Thank you for contacting us and I'd be happy to assist.

By default, the Toolset Views plugin shows the select drop-down fields with only default styles, which may slightly vary, based on different devices and browsers, being used.

It is possible to show them in a different design, with the help of custom CSS code. To check which CSS code is applying to different page elements and experiment with your own custom CSS, you can use Google Chrome's inspect element tool, as explained in this guide:
hidden link

We also have a guide on working with custom CSS code at:
https://toolset.com/documentation/user-guides/adding-custom-css-views/

Here are some useful resources with good examples of code, related to select field styles:

hidden link
hidden link

I hope this helps and for more personalized assistance around custom code, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar