Hey there, I will get back to you later on tonight

Glad you got it working!

The CSS is quite simple, but you will really need to be able to inspect the DOM, no idea why you cant but I suggest taking a look at the generated classes/code via the DOM inspector in either Chrome of Firefox – both these seen to work fine for me!

I’ll try to quickly outline the CSS for you anyway though 😉 Here are some example classes etc:

/* this affects the main form */
form.searchandfilter
{
	border:5px solid black;
}

/* every item in the form is in an LI so this will affect all of them */
form.searchandfilter > ul > li
{
	border:1px solid #f00;
}

/* then all fields have a class which is specific to their name - so you need the inspector for your particular fields */
/* this targets a category LI container if you have one */
form.searchandfilter > ul > li.sf-field-category
{
	border:1px solid #0f0;
	background-color: #ccc;
}

/* then this would specifically target the SELECT dropdown for category (if that is what you were using) */
form.searchandfilter > ul > li.sf-field-category select
{
	border:1px solid #0f0;
	
}

/* To target all form fields do something like any of the following: */
/* targets all the select dropdowns: */
form.searchandfilter select
{
	border:1px solid #0f0;
}

/* targets all input fields: */
form.searchandfilter input[type=text]
{
	border:1px solid #00f;
}
/* targets all radio inputs: */
form.searchandfilter input[type=radio]
{
	border:1px solid #00f;
}

/* targets the submit button: */
form.searchandfilter .sf-field-submit input
{
	border:1px solid #0f0;
}

Basically the form is a big unordered list – and every field in in a list item element (<li>), then each <li> has a class, with a prefix followed by the type and name of the field so this really dependent on how you have your form setup 🙂

Hope that helps!